/* ============================================================
   Javas Exchange (JVX) — design tokens
   Direction: ledger-calm, institutional. A Sheung Wan money desk,
   not a retail exchange. Dense but quiet.
   Depth strategy: BORDERS + tonal surface shift. No decorative shadows.
   ============================================================ */

:root{
  /* --- brand constants (same in both themes) --- */
  --deep:#25165b;      /* Javas purple — structure, ink */
  --signal:#e8585f;    /* coral — the single accent, ~10% of screen */
  --flag:#f2c94c;      /* gold — rare, for flags/watchlist only */

  /* --- surfaces: one hue, lightness steps only --- */
  --canvas:#f7f6f8;         /* the desk */
  --sheet:#ffffff;          /* paper on the desk */
  --sheet-raised:#ffffff;   /* popovers, one level up */
  --sheet-sunk:#f1eff4;     /* inputs are inset — they receive content */
  --tint:#eeebf2;           /* hover wash */

  /* --- rules: low-opacity, blend with the ground --- */
  --rule:rgba(37,22,91,.11);
  --rule-soft:rgba(37,22,91,.07);
  --rule-strong:rgba(37,22,91,.18);
  --ring:rgba(232,88,95,.30);

  /* --- ink: four levels, not two --- */
  --ink:#231f28;      /* primary   — values, headings */
  --ink-2:#5b545f;    /* secondary — labels, body */
  --ink-3:#8e8791;    /* tertiary  — metadata */
  --ink-4:#b4aeb8;    /* muted     — disabled, placeholder */
  --on-deep:#ffffff;

  /* --- semantic: never colour alone, always paired with a glyph --- */
  --gain:#1f7a55;
  --loss:#c0414c;

  /* --- accent role --- */
  --accent:var(--deep);
  --on-accent:#ffffff;

  /* --- named panels --- */
  --rail:#25165b;      /* sidebar — deliberately distinct from the canvas */
  --hero:#ece7f6;      /* portfolio panel — pale lilac, ties back to the rail */
  --on-hero:var(--ink);

  /* Largest segment of any split bar. Not --deep directly: purple on the dark
     hero panel is invisible, and that segment is usually the biggest share. */
  --avail:var(--deep);

  /* --- type scale: 14px base, 1.25 ratio, rounded to px --- */
  --t-meta:11px;
  --t-label:12px;
  --t-body:14px;
  --t-h4:16px;
  --t-h3:18px;
  --t-h2:22px;
  --t-h1:28px;
  --t-display:44px;

  /* --- spacing: 4px base --- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* --- radius scale ---
     Near-square, to match the landing page's ledger grid: containers are ruled
     boxes, not soft cards. Circles (avatars, coin badges) stay circles — they
     use 50%, not these tokens. */
  --r-sm:2px;   /* inputs, chips */
  --r:2px;      /* buttons */
  --r-md:0;     /* cards */
  --r-lg:0;     /* hero containers */

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cut:9px;    /* the angled corner on primary buttons */

  --ease:cubic-bezier(.23,1,.32,1);
}

:root[data-theme="dark"]{
  --canvas:#141019;
  --sheet:#1b1622;          /* base +7% */
  --sheet-raised:#221c2b;   /* +9%  */
  --sheet-sunk:#100d15;     /* inputs sink below the sheet */
  --tint:#241e2e;

  --rule:rgba(255,255,255,.09);
  --rule-soft:rgba(255,255,255,.055);
  --rule-strong:rgba(255,255,255,.16);

  --ink:#efedf1;
  --ink-2:#aaa3af;
  --ink-3:#817a87;
  --ink-4:#5d5665;

  /* desaturate semantics on dark */
  --gain:#4cb98a;
  --loss:#e8757e;
  --accent:var(--signal);

  --rail:#1c1231;   /* keeps the purple identity without glowing on dark */
  --hero:#241d36;
  --avail:#9b86d8;
}

/* ---------- legacy aliases (screens not yet redesigned) ---------- */
:root{
  --purple:var(--deep); --coral:var(--signal); --gold:var(--flag);
  --bg:var(--canvas); --surface:var(--sheet); --surface-2:var(--tint);
  --line:var(--rule); --text:var(--ink); --mute:var(--ink-3);
  --up:var(--gain); --down:var(--loss);
}

/* ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
  font-size:var(--t-body);line-height:1.5;
  color:var(--ink);background:var(--canvas);
}

h1,h2,h3,h4{letter-spacing:-.018em;text-wrap:balance;line-height:1.2}
p{text-wrap:pretty}

a{color:var(--accent);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
/* links that aren't text links — the logo and link-buttons — never underline.
   The logo also drops the accent colour; buttons set their own. */
a.logo,a.logo:hover{color:inherit;text-decoration:none}
a.btn:hover,a.theme-toggle:hover{text-decoration:none}
[hidden]{display:none !important}
i[class^="ri-"]{font-style:normal;line-height:1}

/* every number that can change gets tabular figures */
.num,.tnum,td .num,input[inputmode="decimal"]{font-variant-numeric:tabular-nums}

/* one visible focus treatment everywhere */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------- surfaces ---------- */
.card{
  position:relative;
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:var(--s5);
}
/* corner brackets — four L-marks, as on the landing page's tiles. An overlay, so
   it sits over whatever the card paints and never takes a click. */
.card::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  --b:var(--rule-strong);
  background-repeat:no-repeat;background-image:
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),
    linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;
  background-position:5px 5px,5px 5px,calc(100% - 5px) 5px,calc(100% - 5px) 5px,
    5px calc(100% - 5px),5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) calc(100% - 5px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:40px;padding:0 var(--s4);
  font:inherit;font-size:var(--t-body);font-weight:500;
  color:var(--on-accent);background:var(--accent);
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:background .14s var(--ease),transform .10s var(--ease),border-color .14s var(--ease);
}
.btn:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.btn:active{transform:scale(.98)}
/* primary actions take the landing page's angled corner; the cut comes off on
   focus so the ring isn't clipped */
.btn:not(.ghost){clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.btn:focus-visible{clip-path:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--tint);border-color:var(--rule-strong)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- controls ---------- */
label{display:block;font-size:var(--t-label);font-weight:500;color:var(--ink-2)}

input,select,textarea{
  width:100%;min-height:40px;
  font:inherit;font-size:var(--t-body);color:var(--ink);
  background:var(--sheet-sunk);          /* inset — receives content */
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:0 var(--s3);
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
/* The native arrow is painted by the browser at the control edge and ignores
   padding-right, so we draw our own and give it proper breathing room. */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235b545f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px 8px;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23aaa3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select::-ms-expand{display:none}
input:hover,select:hover{border-color:var(--rule-strong)}
/* background-color, not the shorthand — the shorthand would wipe the select chevron */
input:focus,select:focus{outline:0;border-color:var(--signal);box-shadow:0 0 0 3px var(--ring);background-color:var(--sheet)}
input::placeholder{color:var(--ink-4)}

/* ---------- theme toggle ---------- */
.theme-toggle{
  width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--rule-strong);border-radius:var(--r);
  font-size:17px;transition:background .14s var(--ease),color .14s var(--ease);
}
.theme-toggle:hover{background:var(--tint);color:var(--ink)}
.theme-toggle .ri-sun-line{display:none}
:root[data-theme="dark"] .theme-toggle .ri-moon-line{display:none}
:root[data-theme="dark"] .theme-toggle .ri-sun-line{display:block}

/* ---------- utility ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:active{transform:none}
}