/* tokens.css — the single source of truth for every colour, size, radius and shadow.
   Nothing else in the theme may hardcode a hex value. */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:            #0B0E14; /* page */
  --bg-footer:     #0A0D12;
  --bg-panel:      #0D1117; /* cards, terminals, inputs-on-panel */
  --bg-card-top:   #10151E; /* card gradient start */
  --bg-row-hover:  #0E1219;
  --bg-titlebar:   #0B0F16; /* terminal title bars */
  --bg-code:       #151B26; /* inline code */
  --bg-nav-active: #161D29;

  /* ── Borders ──────────────────────────────────────────────── */
  --border:        #1E2836;
  --border-strong: #263143;
  --border-frame:  #2A3648; /* phone mockups, ruler strip */
  --border-subtle: #151C27;
  --border-ghost:  #3A4657;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:          #E6EDF3;
  --text-strong:   #B9C6D6;
  --text-body:     #9FB0C3;
  --text-body-alt: #AAB9CB;
  --text-muted:    #8FA0B5;
  --text-faint:    #5B6B7F;

  /* ── Accents ──────────────────────────────────────────────── */
  --green:         #3FB950;
  --green-hover:   #56D364;
  --gold:          #E3B341;
  --blue:          #58A6FF;
  --blue-alt:      #79B8FF;
  --orange:        #F0883E;
  --orange-hover:  #FFA657;
  --red:           #F85149;
  --purple:        #D2A8FF;

  --green-rgb:  63, 185, 80;
  --gold-rgb:   227, 179, 65;
  --blue-rgb:   88, 166, 255;
  --orange-rgb: 240, 136, 62;

  /* Per-page accent — overridden on app landing pages via [data-accent]. */
  --accent:      var(--green);
  --accent-rgb:  var(--green-rgb);
  --accent-hover: var(--green-hover);

  /* ── Typography ───────────────────────────────────────────── */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Geometry ─────────────────────────────────────────────── */
  --container:      1180px;
  --container-mid:  1000px;
  --container-narrow: 900px;
  --container-article: 760px;
  --pad-x:          28px;

  --r-chip:   4px;
  --r-sm:     5px;
  --r-btn:    8px;
  --r-input:  8px;
  --r-md:     10px;
  --r-card:   14px;
  --r-panel:  16px;
  --r-phone:  40px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-terminal: 0 40px 90px -35px rgba(0, 0, 0, .95);
  --shadow-card:     0 24px 60px -20px rgba(var(--accent-rgb), .22);
  --shadow-btn:      0 10px 30px -8px rgba(var(--accent-rgb), .5);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Accent scoping: a page sets data-accent and every accent-driven rule follows. */
[data-accent="gold"]   { --accent: var(--gold);   --accent-rgb: var(--gold-rgb);   --accent-hover: var(--gold); }
[data-accent="blue"]   { --accent: var(--blue);   --accent-rgb: var(--blue-rgb);   --accent-hover: var(--blue-alt); }
[data-accent="orange"] { --accent: var(--orange); --accent-rgb: var(--orange-rgb); --accent-hover: var(--orange-hover); }
[data-accent="green"]  { --accent: var(--green);  --accent-rgb: var(--green-rgb);  --accent-hover: var(--green-hover); }