/* ============================================================================
   AZRA — PUBLIC SITE THEME  (the one public palette)

   THIS FILE IS THE SINGLE SOURCE OF TRUTH for the colour, type and surface
   language of every PUBLIC page: the landing page, pricing, affiliates, the
   legal pages, the docs, the guides/blog and the SEO landing pages.

   It exists because those pages used to be dressed by four unrelated token
   sets — asra-styles.css (landing: navy + crimson/pistachio, Inter), the
   dashboard bundle (pricing/legal/seo: near-black, Plus Jakarta Sans) and
   docs/style.css (its own BLUE accent on Segoe UI) — so the same product read
   as three different products depending on which link you followed.

   Two blocks below, and the split is load-bearing:

     1. CANONICAL TOKENS — the landing's palette, verbatim. Everything else in
        the file resolves against these, so re-theming the public site is an
        edit to block 1 alone.

     2. CONSUMER ALIASES — the token NAMES the other public stylesheets were
        already written against (--bg, --surface, --blurple, --accent, --card,
        --heading …) pointed at block 1. That is what re-themed docs, pricing,
        legal and the guides without rewriting a single rule in them.

   LOAD ORDER MATTERS AND DIFFERS BY PAGE:
     · landing  → BEFORE asra-styles.css (which no longer declares :root)
     · docs     → BEFORE docs/style.css  (which no longer declares :root)
     · pricing / affiliates / legal / blog / seo
                → AFTER the dashboard bundle, because those pages load the WHOLE
                  dashboard stylesheet and this has to win over its :root.

   IT IS DELIBERATELY NOT IN css/parts/. That directory IS the dashboard
   bundle's manifest (server/src/index.js scans it and orders by the numeric
   filename prefix), so a file dropped in there would be served to the signed-in
   app as well — repainting the dashboard, which is a different product surface
   with its own near-black canvas. Public pages link this explicitly.
   ========================================================================== */

/* ── 1 · CANONICAL TOKENS (the landing palette) ─────────────────────────── */
:root {
  /* Sticky public-site header height (mirrors public-chrome.css .header__inner).
     Used to offset anchor jumps (scroll-padding-top) below the sticky header. */
  --header-h: 72px;

  /* Backgrounds */
  --bg-void: #0b1220;
  --bg-base: #111827;
  --bg-elevated: #1e293b;
  --bg-elevated-2: #243046;

  /* Crimson */
  --crimson-300: #f47373;
  --crimson-400: #ef4444;
  --crimson-500: #dc2626;
  --crimson-600: #b91c1c;
  --crimson-700: #991b1b;

  /* Pistachio */
  --pistachio-200: #c9e6b6;
  --pistachio-300: #a8d08d;
  --pistachio-400: #93c572;
  --pistachio-500: #7fb069;

  /* Text */
  --text-primary: #f7f9fc;
  --text-secondary: #aab4c5;
  --text-muted: #71798c;
  --text-on-accent: #0b1220;

  /* Glass / borders */
  --glass-fill: rgba(255, 255, 255, 0.045);
  --glass-fill-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-strong: rgba(255, 255, 255, 0.16);
  --hairline: rgba(255, 255, 255, 0.07);

  /* Accent gradients */
  --grad-crimson: linear-gradient(135deg, var(--crimson-500), var(--crimson-700));
  --grad-pistachio: linear-gradient(135deg, var(--pistachio-300), var(--pistachio-500));
  --grad-brand: linear-gradient(120deg, var(--crimson-500) 0%, var(--crimson-600) 38%, var(--pistachio-400) 100%);
  --grad-text: linear-gradient(100deg, #ffffff 0%, var(--pistachio-300) 55%, var(--crimson-300) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.55);
  --shadow-crimson-glow: 0 0 0 1px rgba(220, 38, 38, 0.25), 0 16px 48px -12px rgba(220, 38, 38, 0.35);
  --shadow-pistachio-glow: 0 0 0 1px rgba(127, 176, 105, 0.25), 0 16px 48px -12px rgba(127, 176, 105, 0.3);

  /* Type */
  --font-display: "Sora", "Space Grotesk", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-hero: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);

  /* Layout */
  --container-width: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --section-pad: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* RGB triplets, for the alpha tints (`rgba(var(--accent-rgb), .12)`) that
     glows, pills and hover washes are built from. A hex cannot be used with an
     alpha in that position, which is why every stylesheet that wants a tint
     had hardcoded its accent — the reason docs kept its blue glow long after
     its --accent had been re-pointed. */
  --crimson-rgb: 220, 38, 38;
  --pistachio-rgb: 147, 197, 114;
  --danger-rgb: 239, 68, 68;
  --amber-rgb: 245, 158, 11;
  --neutral-rgb: 148, 163, 184;

  color-scheme: dark;
}

/* ── 2 · CONSUMER ALIASES ────────────────────────────────────────────────
   The names the other public stylesheets already resolve against. Nothing
   here introduces a colour — every value points back into block 1, so the
   public site cannot drift into a second palette.
   ------------------------------------------------------------------------ */
:root {
  /* Canvas + surfaces
     --bg-sidebar is the "recessed" fill (hero backdrops, table headers, inset
     panels). It resolves to the VOID rather than to a lighter grey so a hero
     reads as the landing's deep alternating section instead of a pale strip. */
  --bg:             var(--bg-base);
  --bg-main:        var(--bg-base);
  --bg-secondary:   var(--bg-elevated);
  --bg-tertiary:    var(--bg-void);
  --bg-sidebar:     var(--bg-void);
  --surface:        var(--bg-elevated);
  --surface-hover:  var(--bg-elevated-2);
  --bg-card:        var(--bg-elevated);
  --card:           var(--bg-elevated);
  --bg2:            var(--bg-base);
  --bg3:            var(--bg-elevated);
  --sidebar:        var(--bg-void);
  --code-bg:        var(--bg-void);
  --tag-bg:         var(--bg-elevated-2);
  --glass:          rgba(17, 24, 39, 0.72);
  --glass-strong:   rgba(30, 41, 59, 0.82);

  /* Borders */
  --border:         var(--glass-border);
  --border-color:   var(--glass-border);
  --border-strong:  var(--glass-border-strong);

  /* Text — --text-primary / --text-secondary / --text-muted keep the names AND
     the roles they have in block 1, so they need no alias. */
  --text:           var(--text-secondary);
  --heading:        var(--text-primary);
  --muted:          var(--text-muted);

  /* Brand accent. Every one of these names meant "the primary accent" on some
     public page: --blurple on pricing/seo (a Discord-era name kept so its rules
     inherit the re-theme), --accent/--accent2 in docs, --blue in the shared
     lp-* landing block. */
  --accent:         var(--crimson-500);
  --accent2:        var(--crimson-600);
  --accent-rgb:     var(--crimson-rgb);
  --blurple:        var(--crimson-500);
  --blurple-hover:  var(--crimson-600);
  --blue:           var(--crimson-500);
  --blue-rgb:       var(--crimson-rgb);
  --crimson:        var(--crimson-500);
  --crimson-dark:   var(--crimson-600);
  --crimson-deep:   var(--crimson-700);
  --crimson-glow:   var(--crimson-400);

  /* Growth / success */
  --green:          var(--pistachio-400);
  --green-rgb:      var(--pistachio-rgb);
  --pistachio:      var(--pistachio-400);
  --pistachio-light:var(--pistachio-300);
  --pistachio-dark: var(--pistachio-500);
  --pistachio-glow: var(--pistachio-200);

  /* Destructive + warning */
  --red:            var(--crimson-400);
  --red-rgb:        var(--danger-rgb);
  --yellow:         #f59e0b;

  /* Categorical chips (docs command surfaces, plan tags). These have to stay
     TELLABLE APART — they label four different kinds of thing — so they are
     four members of this palette rather than four hues from outside it. */
  --cat-1:          var(--crimson-500);
  --cat-1-rgb:      var(--crimson-rgb);
  --cat-2:          var(--pistachio-400);
  --cat-2-rgb:      var(--pistachio-rgb);
  --cat-3:          #f59e0b;
  --cat-3-rgb:      var(--amber-rgb);
  --cat-4:          var(--text-secondary);
  --cat-4-rgb:      var(--neutral-rgb);
  /* Legacy docs names kept so its existing rules resolve. */
  --purple:         var(--cat-3);
  --cyan:           var(--cat-4);

  /* Type aliases */
  --font:           var(--font-body);

  /* Motion + focus aliases */
  --ease:           var(--ease-out);
  --spring:         var(--ease-spring);
  --ring-blue:      0 0 0 3px rgba(var(--crimson-rgb), 0.30);
}