/* ═══════════════════════════════════════════════════════════════════════════
   BuYüm — Design tokens  [SHARED]   ·   THE "KNOB PANEL"
   ───────────────────────────────────────────────────────────────────────────
   Single source of truth for every design VALUE on the site: colors, fonts,
   radii, shadows, spacing, and type sizes. Change a value here and it
   propagates everywhere that references the token.

   LOAD ORDER: this file is linked immediately BEFORE shared.css on every page
   that loads shared.css (refguid/ loads neither and is intentionally excluded).

   CONVENTIONS
   - Colors + fonts: the canonical brand palette (was formerly shared.css :root).
   - Radius / shadow: complete scales — call-sites reference these via var().
   - Spacing / type: scales are DEFINED here as the foundation, but call-sites
     are not yet migrated to them (that is a later phase). They exist so future
     work has one place to reach for; using them is encouraged for new code.
   - Accent blue: see the note in the Colors block — there are two historically
     distinct blues, each now single-source.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ──────────────────────────────────────────────────────────────
     Surfaces, text, borders, and the accent palette. */
  --bg-deep:          #0a0c14;
  --bg-surface:       #10131d;
  --glass:            rgba(255, 255, 255, 0.04);   /* translucent card fill */
  --glass-border:     rgba(255, 255, 255, 0.40);
  --text-primary:     #c8d0e0;
  --text-primary-rgb: 200, 208, 224;               /* channel triplet for cool hairline tints */
  --text-secondary:   rgba(200, 208, 224, 0.78);
  --text-dim:         rgba(200, 208, 224, 0.58);

  /* Accent — blue.
     One brand blue across the site (solid accent, ambient glows, focus ring).
     The *-rgb channel triplet exists so alpha tints can be written as
     rgba(var(--accent-blue-rgb), <alpha>) without restating the colour. */
  --accent-blue:      #5b90c6;
  --accent-blue-rgb:  91, 144, 198;
  --accent-blue-glow: rgba(var(--accent-blue-rgb), 0.15);

  /* Accent — status colours.
     The *-rgb channel triplets (mirroring --accent-blue-rgb) let alpha tints be
     written e.g. rgba(var(--accent-green-rgb), 0.13) without restating the colour. Each
     triplet equals its hex exactly. */
  --accent-amber:     #ff9100;
  --accent-amber-rgb: 255, 145, 0;
  --accent-green:     #00d964;
  --accent-green-rgb: 0, 217, 100;
  --accent-red:       #ff4545;
  --accent-red-rgb:   255, 69, 69;

  /* Accent — violet (homepage ambient secondary tone).
     Cool violet used only in the homepage ambient glow, beside accent-blue.
     The -rgb channel feeds alpha tints, mirroring the other accents. */
  --accent-violet:     #6e68c4;
  --accent-violet-rgb: 110, 104, 196;

  /* Accent — silver (sale buttons).
     The premium "silver / sales" button colour (studiostream hero CTA, the
     pricing-card Buy/Subscribe buttons, the hidden notify button). A shared
     token so the canonical .btn-sale in components.css is single-source. Its
     value equals --text-primary but is kept a separate token by intent — a
     brand accent, not body text. The -rgb channel feeds the buttons' soft
     outer-glow rgbas (mirroring the other accents). */
  --accent-silver:     #c8d0e0;
  --accent-silver-rgb: 200, 208, 224;

  /* ── Surfaces & hairlines (translucent neutrals) ───────────────────────────
     Homepage card fills (a subtle two-stop gradient) + crisp cool hairline
     borders. Intentionally distinct from --glass / --glass-border, which remain
     the app-chrome surfaces; the homepage uses these cooler, lower-alpha lines
     by design — the "dual-border convention". */
  --surface-1:      rgba(255, 255, 255, 0.025);          /* card fill — low  (gradient end)   */
  --surface-2:      rgba(255, 255, 255, 0.045);          /* card fill — high (gradient start) */
  --hairline:       rgba(var(--text-primary-rgb), 0.12); /* crisp cool edge  */
  --hairline-soft:  rgba(var(--text-primary-rgb), 0.07); /* softer cool edge */

  /* ── Fonts ───────────────────────────────────────────────────────────────
     Loaded from Google Fonts (same URL on every page). */
  --font-display:     'Syne', sans-serif;
  --font-mono:        'DM Mono', monospace;
  --font-body:        'DM Sans', sans-serif;

  /* ── Radius ──────────────────────────────────────────────────────────────
     Complete corner-radius scale (captured from existing usage).
     `border-radius: 50%` (dots, spinners, toggle thumbs) stays 50% — it is a
     ratio, not a step on this scale.
       --radius-card / --radius-input are the named control/card radii used by
       the account + admin surfaces; kept as named aliases so their call-sites
       are unchanged. */
  --radius-xs:        2px;     /* focus-ring corners */
  --radius-sm:        4px;     /* chips, close-button hit area, small dividers */
  --radius-md:        8px;     /* mail inputs, small buy buttons, legal <code> */
  --radius-lg:        10px;    /* default control: inputs, toasts, buy/cookie buttons */
  --radius-xl:        12px;    /* compact cards (profile, studiostream steps) */
  --radius-2xl:       14px;    /* standard card */
  --radius-3xl:       16px;    /* modals, large cards, pricing card */
  --radius-4xl:       20px;    /* hero login / stat / detail-modal cards */
  --radius-pill:      100px;   /* pill / lozenge */
  --radius-full:      999px;   /* fully-round toggle tracks */

  --radius-card:      14px;    /* = --radius-2xl, named for account/admin cards */
  --radius-input:     10px;    /* = --radius-lg,  named for account/admin inputs */

  /* Button radii — off-scale exact values (a Phase C call may snap these to the
     scale above). Named so the canonical .btn family in components.css is single-
     source. */
  --radius-btn:       9px;     /* button base */
  --radius-btn-sm:    7px;     /* small button */
  --radius-btn-lg:    11px;    /* large button */

  /* ── Shadow ──────────────────────────────────────────────────────────────
     Single source of truth for every box-shadow on the site, grouped by kind.
     Call-sites reference these via var(); no raw shadow literals live anywhere else. */

  /* Neutral drop shadows (plain black) */
  --shadow-modal:         0 24px 80px rgba(0, 0, 0, 0.6);
  --shadow-modal-sm:      0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-card:          0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-fab:           0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-toast:         0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-banner:        0 -8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sticky-header: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-sticky-col:    2px 0 8px rgba(0, 0, 0, 0.4);

  /* Composite (inset hairline + drop, optional ambient glow) */
  --shadow-hero:          inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(var(--accent-silver-rgb), 0.04);
  --shadow-media:         inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Focus / utility */
  --shadow-focus:         0 0 0 3px var(--accent-blue-glow);
  --shadow-dot:           0 0 0 2px rgba(10, 12, 20, 0.85);

  /* Brand-tinted (accent glows) */
  --shadow-sale:               0 0 0 1px rgba(var(--accent-silver-rgb), 0.30), 0 4px 16px rgba(var(--accent-silver-rgb), 0.15);
  --shadow-sale-hover:         0 0 0 1px rgba(var(--accent-silver-rgb), 0.50), 0 6px 24px rgba(var(--accent-silver-rgb), 0.25);
  --shadow-featured:           0 0 0 1px rgba(var(--accent-green-rgb), 0.30), 0 10px 36px rgba(var(--accent-green-rgb), 0.16);
  --shadow-featured-btn:       0 0 0 1px rgba(var(--accent-green-rgb), 0.35), 0 4px 16px rgba(var(--accent-green-rgb), 0.20);
  --shadow-featured-btn-hover: 0 0 0 1px rgba(var(--accent-green-rgb), 0.55), 0 6px 24px rgba(var(--accent-green-rgb), 0.30);
  --shadow-problem-hover:      0 4px 24px rgba(var(--accent-red-rgb), 0.05);

  /* Homepage redesign — wide product/connect cards, framed media, primary CTA */
  --shadow-product:       0 22px 60px rgba(0, 0, 0, 0.34);
  --shadow-product-hover:  0 32px 80px rgba(0, 0, 0, 0.44), 0 0 42px rgba(var(--accent-blue-rgb), 0.10);
  --shadow-frame:         0 16px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-cta:           0 8px 28px rgba(var(--accent-blue-rgb), 0.30);
  --shadow-cta-hover:      0 12px 38px rgba(var(--accent-blue-rgb), 0.45);

  /* ── Blur ──────────────────────────────────────────────────────────────────
     Filter-blur radii. (Element backdrop-blur values live at their call-sites in
     shared.css; this is the homepage ambient-glow softening radius.) */
  --blur-ambient:   46px;

  /* ── Spacing ─────────────────────────────────────────────────────────────
     Box-spacing scale (padding/margin/gap). Call-sites are migrated to these
     tokens (Phase C spacing passes). Tops at --space-28 (96px) for large
     section rhythm. Deliberately OFF the scale (left literal): positioning
     offsets (top/right/bottom/left/inset), 0/auto/%, negatives, sub-floor
     micro-values < 4px, and the two functional icon/badge-clearance pads
     (38px/42px). */
  --space-1:          4px;
  --space-2:          6px;
  --space-3:          8px;
  --space-4:          10px;
  --space-5:          12px;
  --space-6:          14px;
  --space-7:          16px;
  --space-8:          18px;
  --space-9:          20px;
  --space-10:         24px;
  --space-11:         28px;
  --space-12:         32px;
  --space-14:         40px;
  --space-16:         48px;
  --space-20:         60px;
  --space-24:         80px;
  --space-28:         96px;

  /* ── Type sizes ──────────────────────────────────────────────────────────
     Body + heading/display scale. Call-sites are migrated to these tokens
     across the Phase C type passes. SIZE ONLY — font-weight and line-height
     stay at each call-site (semantic per surface: marketing 800 / app 700 /
     legal sub-head 600). Body rungs --text-2xs…--text-2xl (10–20px); heading
     rungs --text-3xl…--text-8xl (22–52px). */
  --text-2xs:         10px;
  --text-xs:          11px;
  --text-sm:          12px;
  --text-base:        13px;
  --text-md:          14px;
  --text-lg:          16px;
  --text-xl:          18px;
  --text-2xl:         20px;
  --text-3xl:         22px;
  --text-4xl:         26px;
  --text-5xl:         32px;
  --text-6xl:         38px;
  --text-7xl:         44px;
  --text-8xl:         52px;
  --text-9xl:         60px;    /* homepage hero display max (clamp ceiling) */
}