/* =========================================================================
   PS99 Rap — Design Tokens
   Dark-first. Teal brand. Finance/trading-platform aesthetic.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     BRAND
     ----------------------------------------------------------------------- */
  --brand-teal:        #46ddda;   /* primary brand color */
  --brand-teal-hover:  #5ae4e1;   /* hover: lighter */
  --brand-teal-active: #32b8b5;   /* press: darker */
  --brand-teal-10:     rgba(70, 221, 218, 0.10);
  --brand-teal-20:     rgba(70, 221, 218, 0.20);
  --brand-teal-40:     rgba(70, 221, 218, 0.40);
  --brand-teal-60:     rgba(70, 221, 218, 0.60);

  /* -----------------------------------------------------------------------
     SURFACES (dark mode default)
     Layered from deepest to shallowest.
     ----------------------------------------------------------------------- */
  --bg-page:   #0b1220;   /* page background */
  --bg-1:      #0f172a;   /* base card / panel */
  --bg-2:      #151f36;   /* raised card, table header */
  --bg-3:      #1c2742;   /* hover surface / selected row */
  --bg-4:      #25304d;   /* top of the stack (modals, menus) */
  --bg-inset:  #070d19;   /* inset / well / inputs */

  /* -----------------------------------------------------------------------
     FOREGROUND (text on dark)
     ----------------------------------------------------------------------- */
  --fg-1:      #f1f5fb;   /* primary text */
  --fg-2:      #c2ccdc;   /* secondary text */
  --fg-3:      #8a94a8;   /* tertiary / labels */
  --fg-4:      #596377;   /* quaternary / disabled / axis labels */
  --fg-5:      #3b4458;   /* hairline text / placeholders */
  --fg-on-teal:#062927;   /* text over brand teal */

  /* -----------------------------------------------------------------------
     BORDERS
     ----------------------------------------------------------------------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-teal:    rgba(70, 221, 218, 0.45);

  /* -----------------------------------------------------------------------
     SEMANTIC — up/down/warn/info for finance semantics
     ----------------------------------------------------------------------- */
  --up-500:     #22c55e;   /* price up / positive delta */
  --up-400:     #4ade80;
  --up-100:     rgba(34, 197, 94, 0.12);

  --down-500:   #ef4444;   /* price down / negative delta */
  --down-400:   #f87171;
  --down-100:   rgba(239, 68, 68, 0.12);

  --warn-500:   #f59e0b;   /* low supply / alerts */
  --warn-400:   #fbbf24;
  --warn-100:   rgba(245, 158, 11, 0.12);

  --info-500:   #60a5fa;
  --info-100:   rgba(96, 165, 250, 0.12);

  /* -----------------------------------------------------------------------
     RARITY TAGS (Pet Sim 99 in-game tiers — Huge/Titanic etc.)
     ----------------------------------------------------------------------- */
  --rarity-common:     #94a3b8;
  --rarity-rare:       #3b82f6;
  --rarity-epic:       #a855f7;   /* violet — secondary accent */
  --rarity-legendary:  #f59e0b;
  --rarity-huge:       #ec4899;   /* pink — in-game "Huge" flag */
  --rarity-titanic:    #f43f5e;   /* red-pink — in-game "Titanic" */
  --rarity-exclusive:  #46ddda;   /* teal — the ultra-tier */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — family
     Geist for UI/display; JetBrains Mono for all numerics.
     ----------------------------------------------------------------------- */
  --font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-lg:      17px;
  --text-xl:      20px;
  --text-2xl:    24px;
  --text-3xl:    30px;
  --text-4xl:    38px;
  --text-display:56px;

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-body:     1.5;
  --lh-data:     1.3;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.08em;

  /* -----------------------------------------------------------------------
     SPACING — 8pt grid with 4px half-step
     ----------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* -----------------------------------------------------------------------
     SHADOWS — used sparingly (overlays only).
     Finance tools rely on borders, not float.
     ----------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-teal-glow: 0 0 32px rgba(70, 221, 218, 0.25);

  /* -----------------------------------------------------------------------
     FOCUS RING
     ----------------------------------------------------------------------- */
  --ring: 0 0 0 2px var(--bg-page), 0 0 0 4px rgba(70, 221, 218, 0.6);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    240ms;
  --dur-data:    600ms;   /* price-flash decay */

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --content-max: 1280px;
  --content-wide: 1440px;
  --nav-height:   56px;
  --sidebar-w:   240px;
  --row-h:        36px;   /* data tables */
  --row-h-sm:     28px;

  /* Theme-aware glass nav surface */
  --nav-surface:  rgba(11, 18, 32, 0.72);
}

/* =========================================================================
   LIGHT MODE (secondary — product is dark-first)
   Apply via `data-theme="light"` on html or a wrapper.
   ========================================================================= */
[data-theme='light'] {
  --bg-page:   #fafbfd;
  --bg-1:      #ffffff;
  --bg-2:      #f3f6fb;
  --bg-3:      #e7ecf4;
  --bg-4:      #ffffff;
  --bg-inset:  #f1f4f9;

  --fg-1:      #0b1220;
  --fg-2:      #334155;
  --fg-3:      #64748b;
  --fg-4:      #94a3b8;
  --fg-5:      #cbd5e1;
  --fg-on-teal:#062927;

  --border-subtle:  rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.11);
  --border-strong:  rgba(15, 23, 42, 0.20);
  --border-teal:    rgba(50, 184, 181, 0.55);

  --brand-teal:        #2cc2bf;
  --brand-teal-hover:  #32cfcc;
  --brand-teal-active: #1f9d9b;
  --brand-teal-10:     rgba(44, 194, 191, 0.10);
  --brand-teal-20:     rgba(44, 194, 191, 0.18);
  --brand-teal-40:     rgba(44, 194, 191, 0.35);
  --brand-teal-60:     rgba(44, 194, 191, 0.55);

  --up-500:   #16a34a;
  --up-400:   #22c55e;
  --up-100:   rgba(22, 163, 74, 0.10);
  --down-500: #dc2626;
  --down-400: #ef4444;
  --down-100: rgba(220, 38, 38, 0.10);
  --warn-500: #d97706;
  --warn-400: #f59e0b;
  --warn-100: rgba(217, 119, 6, 0.10);
  --info-500: #2563eb;
  --info-100: rgba(37, 99, 235, 0.10);

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 12px 36px rgba(15, 23, 42, 0.12);
  --shadow-xl:  0 24px 64px rgba(15, 23, 42, 0.16);
  --shadow-teal-glow: 0 0 32px rgba(44, 194, 191, 0.30);

  --nav-surface: rgba(255, 255, 255, 0.78);

  --ring: 0 0 0 2px var(--bg-page), 0 0 0 4px rgba(44, 194, 191, 0.45);
}

/* =========================================================================
   SUPER DARK MODE (AMOLED / true-black)
   Apply via `data-theme="super-dark"` on html.
   ========================================================================= */
[data-theme='super-dark'] {
  --bg-page:   #000000;
  --bg-1:      #05080f;
  --bg-2:      #080d18;
  --bg-3:      #0c1220;
  --bg-4:      #111828;
  --bg-inset:  #020508;

  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.14);

  --nav-surface: rgba(0, 0, 0, 0.85);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.7);
  --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.8);
}

/* =========================================================================
   SEMANTIC BASE
   ========================================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}
.display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}
.small {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
.xsmall {
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
.label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* Numeric / tabular — ALWAYS use this class for RAP values, Exists, deltas */
.num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.num-lg  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.01em; }
.num-xl  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.02em; }
.num-xxl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-4xl); font-weight: 600; letter-spacing: -0.02em; }

/* Delta helpers */
.delta-up   { color: var(--up-500); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.delta-down { color: var(--down-500); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.delta-flat { color: var(--fg-3);   font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Links */
a, .link {
  color: var(--brand-teal);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { text-decoration: underline; }

/* Focus */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Code */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
}