/* =========================================================
   Redis Design Tokens
   Source of truth — all colors, type, spacing, motion.
   Mirror these in any Figma / JS / Tailwind config.
   ========================================================= */

:root {
  /* ---------- Brand colors (Hyper — signature) ---------- */
  --rd-hyper-01: #FFF3F2;
  --rd-hyper-02: #FFDAD8;
  --rd-hyper-03: #FFACA7;
  --rd-hyper-04: #FD736A;
  --rd-hyper-05: #FF4438;   /* BASE — primary brand */
  --rd-hyper-06: #EB352A;
  --rd-hyper-07: #E4291E;
  --rd-hyper-08: #D1281E;   /* Rich */
  --rd-hyper-09: #8A221C;
  --rd-hyper-10: #351D22;

  /* ---------- Midnight (deepest dark) ---------- */
  /* Desaturated to neutral gray on brand direction — no blue tone. */
  --rd-midnight-base: #171717;  /* primary dark surface */
  --rd-midnight-02:   #121212;

  /* ---------- Dusk (cool gray-blue neutrals; 07-09 desaturated to neutral gray) ---------- */
  --rd-dusk-01: #F3F3F3;
  --rd-dusk-02: #E9E9E9;
  --rd-dusk-03: #D9D9D9;
  --rd-dusk-04: #B9C2C6;
  --rd-dusk-05: #8A99A0;
  --rd-dusk-06: #5C707A;   /* Lightest */
  --rd-dusk-07: #404040;   /* Light */
  --rd-dusk-08: #2E2E2E;   /* BASE */
  --rd-dusk-09: #1E1E1E;

  /* ---------- Web dark (the redis.io dark site surfaces) ----------
     Additive only. These do NOT change light-mode pages; the neutral-gray
     Midnight/Dusk steps above are untouched. Used by the dark web variant,
     which matches the deep blue-teal field on the live site. */
  --rd-web-dark-bar:    #08171D;   /* announcement bar, deepest */
  --rd-web-dark-base:   #0B1E26;   /* page field */
  --rd-web-dark-elev:   #10262F;   /* cards, raised panels */
  --rd-web-dark-sunken: #0D2128;   /* inset bands, code wells */
  --rd-web-dark-line:   #1E3A44;   /* hairline on the dark field */
  --rd-web-dark-line-2: #2C4E59;   /* stronger hairline, hover */

  /* ---------- Yellow (lime accent) ---------- */
  --rd-yellow-01: #FEFFF5;
  --rd-yellow-02: #F5FFC6;
  --rd-yellow-03: #F1FFA8;
  --rd-yellow-04: #E9FF72;
  --rd-yellow-05: #DCFF1E;   /* BASE */
  --rd-yellow-06: #D0F41D;   /* Deep */
  --rd-yellow-07: #BFE112;
  --rd-yellow-08: #A9CA03;
  --rd-yellow-09: #8CAA00;

  /* ---------- Purple (highlighter accent) ---------- */
  --rd-purple-01: #F9F4FC;
  --rd-purple-02: #F1E5FA;
  --rd-purple-03: #E3CAF1;   /* Light */
  --rd-purple-04: #C795E3;   /* BASE */
  --rd-purple-05: #B76BE2;   /* Deep */
  --rd-purple-06: #9C42CE;
  --rd-purple-07: #8F2EC4;
  --rd-purple-08: #7C1AB3;
  --rd-purple-09: #592479;

  /* ---------- Sky blue (highlighter accent) ---------- */
  --rd-blue-01: #F2FBFF;
  --rd-blue-02: #BFEDFF;   /* Light */
  --rd-blue-03: #80DBFF;   /* BASE */
  --rd-blue-04: #5ED1FF;   /* Deep */
  --rd-blue-05: #33C2FB;
  --rd-blue-06: #25B5EE;
  --rd-blue-07: #0F9FD9;
  --rd-blue-08: #0E8EC0;
  --rd-blue-09: #0477A5;

  /* ---------- Neutral grays (functional, not brand) ---------- */
  --rd-gray-01: #FCFCFC;
  --rd-gray-02: #F8F8F8;
  --rd-gray-03: #E6E6E6;
  --rd-gray-04: #D1D3D4;
  --rd-gray-05: #BCBEC0;
  --rd-gray-06: #A7A9AC;
  --rd-gray-07: #939598;
  --rd-gray-08: #6D6E71;
  --rd-gray-09: #58595B;
  --rd-gray-10: #414042;

  --rd-white: #FFFFFF;
  --rd-black: #000000;
  --rd-black-02: #282828;
  --rd-black-03: #2C2C2C;

  /* ---------- Type families ----------
     TT Trailers is a licensed commercial typeface for display ONLY
     in marketing / web / social headlines. NOT for presentation
     decks — the deck template uses Space Grotesk Medium 500 for all
     headlines (covers, dividers, big stats included). It has
     NO Anton fallback — reserve it for true marketing display
     moments and use Space Grotesk (Medium 500 max — never
     Bold/SemiBold) for headlines everywhere else.
     HARD RULE: TT Trailers is ALWAYS all-caps — never lowercase or
     mixed case. Apply it only via the `.rd-display` class (in
     components.css), which binds it to text-transform: uppercase. */
  --rd-font-display: "TT Trailers", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --rd-font-sans:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --rd-font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (px) ---------- */
  --rd-text-xs:   12px;
  --rd-text-sm:   14px;
  --rd-text-base: 16px;
  --rd-text-md:   18px;
  --rd-text-lg:   20px;
  --rd-text-xl:   24px;
  --rd-text-2xl:  30px;
  --rd-text-3xl:  40px;
  --rd-text-4xl:  58px;
  --rd-text-5xl:  80px;
  --rd-text-display: 120px;

  /* ---------- Spacing (4-pt grid) ---------- */
  --rd-space-1:  4px;
  --rd-space-2:  8px;
  --rd-space-3:  12px;
  --rd-space-4:  16px;
  --rd-space-5:  20px;
  --rd-space-6:  24px;
  --rd-space-8:  32px;
  --rd-space-10: 40px;
  --rd-space-12: 48px;
  --rd-space-16: 64px;
  --rd-space-20: 80px;
  --rd-space-24: 96px;
  --rd-space-32: 128px;

  /* ---------- Radii ---------- */
  --rd-radius-xs: 2px;
  --rd-radius-sm: 4px;
  --rd-radius-md: 5px;
  --rd-radius-lg: 8px;
  --rd-radius-xl: 12px;
  --rd-radius-pill: 999px;

  /* ---------- Motion ---------- */
  --rd-ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --rd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --rd-dur-fast:  120ms; /* @kind other */
  --rd-dur-base:  200ms; /* @kind other */
  --rd-dur-slow:  360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --rd-container: 1280px;
  --rd-sidebar-w: 260px;
  --rd-topbar-h: 56px;
}

/* =========================================================
   Semantic tokens — theme-aware
   Light theme by default; .theme-dark overrides on body.
   ========================================================= */
:root {
  /* surfaces */
  --bg:        var(--rd-white);
  --bg-elev:   var(--rd-gray-02);
  --bg-sunken: var(--rd-dusk-01);
  --surface-inverse: var(--rd-midnight-base);

  /* text */
  --fg:         var(--rd-midnight-base);
  --fg-muted:   var(--rd-dusk-07);
  --fg-subtle:  var(--rd-dusk-06);
  --fg-inverse: var(--rd-white);

  /* lines */
  --border:        var(--rd-dusk-03);
  --border-strong: var(--rd-dusk-05);

  /* brand action */
  --action:        var(--rd-hyper-05);
  --action-hover:  var(--rd-hyper-06);
  --action-press:  var(--rd-hyper-07);
  --action-fg:     var(--rd-white);

  /* accent */
  --accent-yellow: var(--rd-yellow-05);
  --accent-purple: var(--rd-purple-04);
  --accent-blue:   var(--rd-blue-03);

  /* dark bands that stay dark in BOTH themes (Midnight sections, code wells).
     In light mode this is Midnight on white; in dark mode it becomes a raised
     panel on the dark field, so the band still reads as separate. */
  --surface-dark:       var(--rd-midnight-base);
  --surface-dark-fg:    var(--rd-white);
  --surface-dark-muted: var(--rd-dusk-04);
  --surface-dark-line:  var(--rd-dusk-07);

  /* logo ink — Hyper red on light, white on dark (brand rule).
     Mask the wordmark/mark to this so it follows the theme with no JS. */
  --logo-ink: var(--action);

  /* state */
  --focus-ring: var(--rd-hyper-05);

  color-scheme: light;
}

/* =========================================================
   Dark theme — add .theme-dark to <body>.
   Matches the live redis.io dark site: deep blue-teal field,
   Hyper red action, Yellow accent on keywords.
   ========================================================= */
.theme-dark {
  /* surfaces */
  --bg:        var(--rd-web-dark-base);
  --bg-elev:   var(--rd-web-dark-elev);
  --bg-sunken: var(--rd-web-dark-sunken);
  --surface-inverse: var(--rd-white);

  /* text */
  --fg:         var(--rd-white);
  --fg-muted:   var(--rd-dusk-04);
  --fg-subtle:  var(--rd-dusk-05);
  --fg-inverse: var(--rd-web-dark-base);

  /* lines */
  --border:        var(--rd-web-dark-line);
  --border-strong: var(--rd-web-dark-line-2);

  /* action — Hyper holds, hover lightens instead of deepening */
  --action:        var(--rd-hyper-05);
  --action-hover:  var(--rd-hyper-04);
  --action-press:  var(--rd-hyper-06);
  --action-fg:     var(--rd-white);

  /* dark bands become raised panels, not white */
  --surface-dark:       var(--rd-web-dark-elev);
  --surface-dark-fg:    var(--rd-white);
  --surface-dark-muted: var(--rd-dusk-04);
  --surface-dark-line:  var(--rd-web-dark-line);

  --logo-ink: var(--rd-white);

  /* remap the neutral-gray dark steps to the blue-teal field, so every
     existing Midnight/Dusk section follows the theme with no page edits */
  --rd-midnight-base: var(--rd-web-dark-base);
  --rd-midnight-02:   var(--rd-web-dark-bar);
  --rd-dusk-07: var(--rd-web-dark-line);
  --rd-dusk-08: var(--rd-web-dark-elev);
  --rd-dusk-09: var(--rd-web-dark-sunken);

  /* the Hyper tint washes must theme too, or a near-white panel lands on the
     dark field with themed (light) text on top of it */
  --rd-hyper-01: var(--rd-hyper-10);   /* accent wash  */
  --rd-hyper-02: var(--rd-hyper-09);   /* accent hairline */

  color-scheme: dark;
}