/* =============================================================
   DATABEAUTY TRIBE — DESIGN TOKEN SYSTEM
   Single source of truth. Import first in every stylesheet.
   ============================================================= */

:root {

  /* ── PRIMARY PALETTE (brand-specified) ──────────────────── */
  /* Background spectrum: dark navy → midnight → elevated     */
  /* Light theme: page/surface backgrounds now light. The deep-navy
     values live on as scoped overrides for the dark zones (nav, hero,
     footer) — see the "DARK ZONES" block at the end of components.css. */
  --color-bg-base:        #f8f9fc;  /* page canvas — off-white         */
  --color-bg-surface:     #ffffff;  /* card / section backgrounds      */
  --color-bg-elevated:    #f1f4fa;  /* elevated surfaces / alt bands   */
  --color-bg-hover:       #eef2f8;  /* interactive hover state          */

  /* Electric blue accent */
  --color-electric:       #1B6EF3;  /* primary brand electric blue      */
  --color-electric-bright:#1553C0;  /* accent text on light (vivid #4D8EFF restored in dark zones) */
  --color-electric-dim:   #1553C0;  /* pressed state                    */
  --color-electric-muted: rgba(27,110,243,0.12); /* transparent tint   */

  /* Text */
  --color-white:          #FFFFFF;  /* genuine white — surfaces, text on colour */
  --color-text-primary:   #111827;  /* primary text on light surfaces   */
  --color-sky:            #1553C0;  /* readable brand blue for accent text on light */
  --color-text-muted:     #4b5563;  /* secondary text on light surfaces */
  --color-text-inverse:   #FFFFFF;  /* text on dark/colour fills        */

  /* ── COMPLEMENTARY — CTAs (amber gold opposes blue) ─────── */
  /* ── CTA ALIASES — strictly brand palette, no amber ───────
     Confirmed from the real logo file: black, electric blue,
     white are the ONLY brand colors — no amber exists anywhere
     in the actual logo. This "cta" family now maps onto a richer,
     deeper blue than flat --color-electric, so featured/urgent
     elements still read with extra visual weight — without
     introducing a hue outside the approved palette.           */
  --color-cta:            #1553C0;              /* accent text on light (vivid restored in dark zones) */
  --color-cta-hover:      #7BA8FF;              /* → lighter blue on hover  */
  --color-cta-pressed:    #1553C0;              /* → electric dim, pressed  */
  --color-cta-muted:      rgba(77,142,255,0.14);
  --color-cta-shadow:     rgba(77,142,255,0.32);

  /* ── ACCENT ALIASES — strictly brand palette ──────────────
     These names are legacy aliases kept so existing classes
     keep working; every value maps to a BRAND color only.
     success/active → electric blue · alerts → amber · book club → sky */
  --color-teal:           #1B6EF3;              /* → electric           */
  --color-teal-light:     #1553C0;              /* accent text on light (badge--teal) */
  --color-teal-muted:     rgba(27,110,243,0.14);
  --color-rose:           rgba(255,255,255,0.75); /* → neutral/inactive — no red or amber exists in the brand */
  --color-rose-muted:     rgba(255,255,255,0.06);
  --color-violet:         #1B6EF3;              /* → electric           */
  --color-violet-light:   #1553C0;              /* accent text on light (badge--violet) */
  --color-violet-muted:   rgba(27,110,243,0.12);

  /* ── ANALOGOUS — Subtle depth & gradients ───────────────── */
  --color-navy-darker:    #020810;
  --color-navy-mid:       #0F2D5C;

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --color-divider:        rgba(17,24,39,0.08);
  --color-border:         rgba(17,24,39,0.12);
  --color-border-focus:   #4D8EFF;
  --color-overlay:        rgba(3,13,26,0.7);

  /* ── GRADIENTS ───────────────────────────────────────────── */
  --gradient-hero:     linear-gradient(135deg,#020810 0%,#030D1A 45%,#081B3A 100%);
  --gradient-electric: linear-gradient(135deg,#1B6EF3 0%,#4D8EFF 100%);
  --gradient-cta:      linear-gradient(135deg,#1553C0 0%,#4D8EFF 100%);
  --gradient-surface:  linear-gradient(180deg,#071120 0%,#0C1E3D 100%);
  --gradient-card:     linear-gradient(135deg,rgba(27,110,243,0.07) 0%,rgba(77,142,255,0.03) 100%);
  --gradient-glass:    linear-gradient(135deg,rgba(12,30,61,0.85) 0%,rgba(7,17,32,0.9) 100%);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  /* Fonts now defined in variables.css (Space Grotesk / Inter). These
     aliases are kept in sync so every component that reads them here
     resolves to the new type system rather than overriding it. */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   clamp(0.688rem, 0.65rem + 0.19vw,  0.813rem);
  --text-sm:   clamp(0.813rem, 0.75rem  + 0.31vw,  0.938rem);
  --text-base: clamp(0.938rem, 0.875rem + 0.31vw,  1.063rem);
  --text-lg:   clamp(1.063rem, 0.975rem + 0.44vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem   + 0.75vw,  1.625rem);
  --text-2xl:  clamp(1.5rem,   1.25rem  + 1.25vw,  2.25rem);
  --text-3xl:  clamp(2rem,     1.5rem   + 2.5vw,   3.5rem);
  --text-4xl:  clamp(2.5rem,   1.75rem  + 3.75vw,  5rem);

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --leading-prose:   1.78;

  --tracking-tight:   -0.02em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.16em;

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

  /* Semantic aliases */
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-4xl: var(--space-24);
  --space-5xl: var(--space-32);

  /* Section rhythm */
  /* The floor is what a phone gets, not a minimum for comfort: at 390px
     wide 8vw is 31px, so a 64px floor handed the narrowest screens the
     most generous spacing on the site — 128px of padding between every
     two sections. Lowering the floor lets the vw term do its job.
     Desktop is untouched: from ~800px up the vw term already exceeded
     the old floor, so those widths compute exactly as before. */
  --section-py:    clamp(40px, 8vw, 120px);
  --section-py-sm: clamp(28px, 5vw, 72px);

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-copy: 720px;
  --container-px:   clamp(16px, 4vw, 48px);
  --nav-height:     72px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-xs:       0 1px 3px rgba(0,0,0,0.35);
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.45);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:       0 8px 40px rgba(0,0,0,0.6);
  --shadow-electric: 0 0 30px rgba(27,110,243,0.22);
  --shadow-cta:      0 4px 24px rgba(77,142,255,0.28);
  --shadow-card:     0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(147,197,253,0.07);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-fast:   0.15s ease;
  --ease-base:   0.25s ease;
  --ease-slow:   0.4s  ease;
  --ease-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-canvas:   0;
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}