/* =====================================================================
   roterminal-ui · tokens.css
   Design tokens extracted from roterminal.co's shipped CSS (core-*.css,
   tile-chart-*.css), cross-checked against computed styles in Chrome
   (Nov 2026). Values marked "computed" come from getComputedStyle on the
   live page; everything else is the literal source value.

   Theme handling (same pattern as the source site):
   - Light values are the default on :root.
   - Dark applies when the OS prefers dark, unless <html data-theme="light">.
   - <html data-theme="dark"> forces dark; data-theme="light" forces light.
   The site is used in dark mode by most people: design and review in dark
   first, then check light.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Core palette (light) ---- */
  --bg: #ffffff;              /* page */
  --fg: #0a0a0b;              /* primary text, primary button face */
  --muted: #8e8e8f;           /* secondary text (data-layout=next value) */
  --faint: #0a0a0b12;         /* hairlines inside components (tab underline track) */
  --pill: #0a0a0b0e;          /* quiet fills: row hover, icon tile, segmented track */
  --tile: #0a0a0b0d;          /* table header band, skeleton base */
  --line: #0a0a0b1a;          /* dividers */
  --ring: #0a0a0b12;          /* 1px inset rings */
  --sheet: #ffffff;           /* dialogs, sheets, menus */
  --nav: #f5f5f5;             /* left rail + side panels (computed) */
  --nav-line: #0a0a0b12;      /* rail right edge (inset -1px 0) */
  --card: color-mix(in srgb, var(--fg) 4%, var(--bg));   /* card face (#f5f5f5-ish) */
  --card-edge: inset 0 0 0 1px color-mix(in srgb, var(--fg) 4.5%, transparent);
  --face-bg: #e6e6eb;         /* avatar / missing-image placeholder */
  --scrim: #00000047;

  /* ---- Accent + semantic (light) ---- */
  --accent: #007aff;          /* iOS system blue */
  --accent-on: #ffffff;
  --blue: #007aff;
  --up: #1f8f45;              /* positive delta */
  --down: #d92d20;            /* negative delta, "Live" badge */
  --star: #f2b100;
  --gold: #b98700;            /* money / Robux ink */
  --amber: #c26b00;
  --warm: #f26a12;
  --teal: #0f9d8f;
  --violet: #7b4dff;

  /* ---- Chart series (light) ---- */
  --series-1: var(--blue);
  --series-2: #f26a12;
  --series-3: #7b4dff;
  --series-4: #0f9d8f;
  --series-5: #b98700;
  --series-6: #e8457c;
  --ink-players: var(--blue);
  --ink-money: #b98700;
  --chart-grid: color-mix(in srgb, var(--fg) 12%, transparent);   /* dashed 3 4 */
  --chart-prev: color-mix(in srgb, var(--fg) 34%, transparent);   /* dotted 2 4 comparison line */
  --chart-hair: color-mix(in srgb, var(--fg) 22%, transparent);   /* hover crosshair */
  --wash-a: 24%;              /* area-fill top opacity (dark: 32%) */
  --gold-fade-top: #ffd24d;   /* money bar gradient */
  --gold-fade-end: #e39b00;

  /* ---- Symbol tile inks (category icons drawn in colour on a --pill tile) ---- */
  --sym-blue: #1f7cff;  --sym-sky: #0a87c2;   --sym-teal: #0b9184;  --sym-green: #17964a;
  --sym-olive: #5d8a1c; --sym-gold: #b57e00;  --sym-orange: #e2620a; --sym-red: #e0352b;
  --sym-rose: #cc2f68;  --sym-pink: #e04a86;  --sym-purple: #a93fd0; --sym-violet: #7b4dff;
  --sym-indigo: #4b5bd8; --sym-slate: #4f6b88; --sym-brown: #9c5c34; --sym-plain: #5d5d62;

  /* ---- Rank medals (1/2/3 badges) ---- */
  --rank-1-rim: linear-gradient(180deg, #f6b72e, #dc8a09);
  --rank-1-face: radial-gradient(120% 90% at 32% 18%, #fff4c2 0%, #ffe07a 38%, #ffc935 100%);
  --rank-1-ink: #6a4100;
  --rank-2-rim: linear-gradient(180deg, #c9cdd3, #8f959e);
  --rank-2-face: radial-gradient(120% 90% at 32% 18%, #fff 0%, #eef0f3 40%, #cfd3d9 100%);
  --rank-2-ink: #3a3e45;
  --rank-3-rim: linear-gradient(180deg, #ec6a40, #c23d1f);
  --rank-3-face: radial-gradient(120% 90% at 32% 18%, #ffc2a3 0%, #ff9466 40%, #f26b3c 100%);
  --rank-3-ink: #4a1505;

  /* ---- "Quiet glass" controls (chips, round buttons, segmented pill) ---- */
  --glass-fill: #0a0a0b0a;                       /* computed rgba(10,10,11,.04) */
  --glass-sheen: linear-gradient(180deg, #ffffff59, #fff0 60%);
  --glass-edge: inset 0 1px 0 #ffffff80, inset 0 -1px 0 #0a0a0b08, inset 0 0 0 1px #0a0a0b12;
  --glass-solid: #f5f5f5;                        /* opaque glass (floating buttons over content) */
  --seg-on: #ffffff;                             /* selected segment face */
  --btn-ink: linear-gradient(180deg, color-mix(in srgb, var(--fg), #fff 16%), var(--fg) 62%);
  --btn-ink-edge: inset 0 1px 0 #fff3, inset 0 -1px 1.5px #00000047;
  --tabbar-glass: #f0f0f4c7;                     /* floating phone tab bar, with blur */

  /* ---- Typography ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
  --fs-badge: 11px;   /* chart axis labels, tiny pills */
  --fs-caption: 12px;
  --fs-meta: 13px;    /* sub lines, deltas under values, table header */
  --fs-small: 14px;   /* control labels (chips in control rows, segmented) */
  --fs-body: 15px;    /* row names, body copy, card titles */
  --fs-row: 16px;     /* tab labels, primary button */
  --fs-item: 17px;    /* card values */
  --fs-title: 20px;   /* section titles, stat-strip values */
  --fs-name: 28px;    /* entity name, big card number */
  --fs-h1: 32px;      /* list page H1 (weight 700) */
  --fs-hero: 40px;    /* hero number */
  --lh-tight: 1;      /* numbers, controls */
  --tracking-title: -0.015em;  /* 20px titles = -0.3px; 28px = -0.56px; 32px = -0.64px */

  /* ---- Spacing (4px base) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- Radii ---- */
  --r-xs: 6px;      /* tiny badges */
  --r-sm: 10px;     /* tooltips, small tiles */
  --r-icon: 12px;   /* 40px game icon */
  --r-row: 14px;    /* list rows, rail buttons, table header band */
  --r-tile: 16px;   /* 56px page-icon tile, 104px entity pic */
  --r-card-sm: 18px;/* rows inside cards */
  --r-group: 20px;
  --r-card: 24px;   /* cards */
  --r-sheet: 28px;  /* dialogs, bottom sheets */
  --r-pill: 999px;  /* every button, chip, segmented control */

  /* ---- Layout ---- */
  --rail-w: 68px;
  --head-h: 64px;
  --col-single: 600px;
  --col-wide: 880px;   /* list/tracker pages */
  --col-home: 1080px;  /* home dashboard */
  --col-max: 1260px;   /* entity dashboard (3 x 408 cards + 2 x 16 gaps) */
  --side-w: 360px;
  --gutter: clamp(32px, 4vw, 72px);

  /* ---- Elevation (cards use NONE of these) ---- */
  --shadow-pop: 0 0 0 1px var(--ring), 0 24px 56px -12px #00000042, 0 6px 16px -6px #0000001a;
  --shadow-dialog: 0 30px 80px #00000059;
  --shadow-sheet: 0 -20px 60px #00000038;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .16s; --dur: .24s; --dur-slow: .42s;

  --z-sticky: 10; --z-nav: 40; --z-popover: 45; --z-toast: 50; --z-sheet: 55; --z-dialog: 60;
}

/* ---- Dark theme values (applied by the two selectors below) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;            /* page (computed; html bg) */
    --fg: #f5f5f7;
    --muted: #767678;
    --faint: #f5f5f712;
    --pill: #f5f5f714;
    --tile: #f5f5f70f;
    --line: #ffffff1c;
    --ring: #ffffff14;
    --sheet: #161618;
    --nav: #121212;
    --nav-line: #1c1c1c;
    --card: #181818;
    --card-edge: inset 0 1px 0 #ffffff08, inset 0 0 0 1px #ffffff06;
    --face-bg: #2c2c2e;
    --scrim: #0009;
    --accent: #0a84ff; --blue: #0a84ff;
    --up: #30d158; --down: #ff453a; --star: #ffd60a;
    --gold: #ffd60a; --amber: #ffb340; --warm: #ff7a1a; --teal: #2dd4bf; --violet: #a98bff;
    --series-2: #e96800; --series-3: #9a7cee; --series-4: #00ac99; --series-5: #af9100; --series-6: #ea5889;
    --ink-money: #ffc533;
    --wash-a: 32%;
    --gold-fade-top: #ffc93a; --gold-fade-end: #b86f00;
    --glass-fill: #ffffff0e;   /* computed rgba(255,255,255,.055) */
    --glass-sheen: linear-gradient(180deg, #ffffff03, #fff0 60%);
    --glass-edge: inset 0 1px 0 #ffffff08, inset 0 -1px 0 #ffffff03, inset 0 0 0 1px #ffffff03;
    --glass-solid: #1b1b1b;    /* computed color(srgb .107) */
    --seg-on: #ffffff17;       /* computed rgba(255,255,255,.09) */
    --btn-ink: linear-gradient(180deg, #f5f5f7, color-mix(in srgb, #f5f5f7 95%, #0e0e0e));
    --btn-ink-edge: inset 0 1px 0 #ffffff99;
    --tabbar-glass: #28282cc7;
    --shadow-pop: 0 0 0 1px var(--ring), 0 26px 60px -12px #000000b3, 0 6px 16px -6px #0006;
    --shadow-dialog: 0 30px 80px #0009;
    --shadow-sheet: 0 -20px 60px #00000080;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0e; --fg: #f5f5f7; --muted: #767678; --faint: #f5f5f712; --pill: #f5f5f714;
  --tile: #f5f5f70f; --line: #ffffff1c; --ring: #ffffff14; --sheet: #161618;
  --nav: #121212; --nav-line: #1c1c1c; --card: #181818;
  --card-edge: inset 0 1px 0 #ffffff08, inset 0 0 0 1px #ffffff06;
  --face-bg: #2c2c2e; --scrim: #0009;
  --accent: #0a84ff; --blue: #0a84ff; --up: #30d158; --down: #ff453a; --star: #ffd60a;
  --gold: #ffd60a; --amber: #ffb340; --warm: #ff7a1a; --teal: #2dd4bf; --violet: #a98bff;
  --series-2: #e96800; --series-3: #9a7cee; --series-4: #00ac99; --series-5: #af9100; --series-6: #ea5889;
  --ink-money: #ffc533; --wash-a: 32%; --gold-fade-top: #ffc93a; --gold-fade-end: #b86f00;
  --glass-fill: #ffffff0e;
  --glass-sheen: linear-gradient(180deg, #ffffff03, #fff0 60%);
  --glass-edge: inset 0 1px 0 #ffffff08, inset 0 -1px 0 #ffffff03, inset 0 0 0 1px #ffffff03;
  --glass-solid: #1b1b1b; --seg-on: #ffffff17;
  --btn-ink: linear-gradient(180deg, #f5f5f7, color-mix(in srgb, #f5f5f7 95%, #0e0e0e));
  --btn-ink-edge: inset 0 1px 0 #ffffff99;
  --tabbar-glass: #28282cc7;
  --shadow-pop: 0 0 0 1px var(--ring), 0 26px 60px -12px #000000b3, 0 6px 16px -6px #0006;
  --shadow-dialog: 0 30px 80px #0009;
  --shadow-sheet: 0 -20px 60px #00000080;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---- Phone / tablet overrides (site breakpoints: 980px and 640px) ---- */
@media (max-width: 980px) {
  :root { --gutter: 20px; --head-h: 48px; }
}

/* ---- Base ---- */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }