/* ============================================================
   RestartME, Design Tokens  (the single source of truth)
   Palette: "Sky + Ink + Bone"
   Type:    Fraunces (display) + Inter (body)
   Edit here; the whole system cascades.
   ============================================================ */

:root {
  /* ---- Brand core: a SKY depth ramp (light = the luxury) -- */
  --mist:       #EAF4FB;   /* faintest sky, silk wash, ambient page glow   */
  --sky-soft:   #CFE6F4;   /* pale sky, tints, washes, chips               */
  --horizon:    #B9DCF0;   /* soft mid sky, silk blooms                    */
  --sky:        #5AAEDD;   /* brand blue, recognition, accents             */
  --sky-deep:   #2E86C0;   /* darker sky, accessible on bone, links/hover  */
  --sky-ink:    #1E5F86;   /* deepest sky, accent text + hairlines on light*/

  --ink-900:    #081A27;   /* near-black ink, reserved for photo scrims    */
  --ink:        #0E2A3B;   /* deep ink, primary text + footer only         */
  --navy:       #163A52;   /* legacy dark surface (footer/toasts)          */
  --navy-700:   #1F4C6B;   /* raised dark surface                          */

  --bone:       #F6F3EC;   /* warm bone, base page tone (luxury)           */
  --bone-deep:  #ECE7DB;   /* deeper bone for layered light sections       */
  --warm-white: #FCFBF7;   /* card / elevated surface                      */
  --white:      #FFFFFF;

  --slate:      #4F6573;   /* secondary text on light                      */
  --stone:      #8FA0AB;   /* muted text, captions, meta                   */
  --line:       rgba(14, 42, 59, 0.10);  /* hairline divider on light     */
  --line-dark:  rgba(255, 255, 255, 0.14);/* hairline on dark             */

  /* Refined accents (replaces the old champagne) , all in the sky family */
  --accent-soft:     #93C9EA;             /* light sky for emphasis on dark */
  --hairline-accent: rgba(46, 134, 192, 0.32);  /* sky hairline, fine detail */

  /* ---- Semantic (light context = default) --------------- */
  --bg:           var(--bone);
  --bg-elevated:  var(--warm-white);
  --bg-dark:      var(--ink);
  --bg-tint:      var(--sky-soft);
  --text:         var(--ink);
  --text-muted:   var(--slate);
  --text-faint:   var(--stone);
  --text-on-dark: var(--bone);
  --accent:       var(--sky-deep);
  --accent-bright:var(--sky);
  --divider:      var(--line);

  /* ---- Glassmorphism ------------------------------------- */
  /* On light/bone backgrounds */
  --glass-bg:      rgba(251, 250, 246, 0.62);
  --glass-border:  rgba(255, 255, 255, 0.70);
  --glass-shadow:  rgba(14, 42, 59, 0.10);
  --glass-blur:    18px;
  /* On dark/ink backgrounds (use .on-dark scope) */
  --glass-bg-dark:     rgba(255, 255, 255, 0.06);
  --glass-border-dark: rgba(255, 255, 255, 0.14);
  --glass-shadow-dark: rgba(0, 0, 0, 0.35);

  /* ---- Typography --------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type scale: clamp(min, preferred, max) */
  --text-xs:   clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);  /* 12 → 13 */
  --text-sm:   clamp(0.8125rem,0.77rem + 0.22vw, 0.9375rem);  /* 13 → 15 */
  --text-base: clamp(0.9375rem,0.88rem + 0.30vw, 1.0625rem);  /* 15 → 17 */
  --text-lg:   clamp(1.0625rem,0.97rem + 0.45vw, 1.25rem);    /* 17 → 20 */
  --text-xl:   clamp(1.25rem,  1.07rem + 0.85vw, 1.625rem);   /* 20 → 26 */
  --text-2xl:  clamp(1.625rem, 1.30rem + 1.55vw, 2.5rem);     /* 26 → 40 */
  --text-3xl:  clamp(2.1rem,   1.55rem + 2.6vw,  3.5rem);     /* 34 → 56 */
  --text-4xl:  clamp(2.6rem,   1.75rem + 4.0vw,  5rem);       /* 42 → 80 */
  --text-5xl:  clamp(3rem,     1.6rem + 6.6vw,   7rem);       /* 48 → 112, editorial hero */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.7;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.14em;   /* eyebrow / overline caps */

  /* ---- Spacing scale (generous = luxury) ---------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-5xl: 9rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);   /* vertical rhythm between sections */

  /* ---- Layout ------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 760px;    /* readable measure for article body */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius ------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 44px;
  --radius-full: 9999px;

  /* ---- Shadows (soft, expensive) ------------------------ */
  --shadow-xs: 0 1px 2px rgba(8,26,39,0.06);
  --shadow-sm: 0 6px 18px rgba(8,26,39,0.08);
  --shadow-md: 0 16px 40px rgba(8,26,39,0.12);
  --shadow-lg: 0 30px 70px rgba(8,26,39,0.18);
  --shadow-xl: 0 50px 110px rgba(8,26,39,0.26);
  --shadow-cinematic: 0 60px 120px -30px rgba(8,26,39,0.55);

  /* ---- Ambient silk + texture (the light-luxe atmosphere) - */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Two sheer sky "curtains" that drift across the warm-white ground */
  --silk-a: radial-gradient(42% 52% at 22% 28%, color-mix(in srgb, var(--sky) 30%, transparent) 0%, transparent 62%),
            radial-gradient(46% 56% at 78% 22%, color-mix(in srgb, var(--horizon) 60%, transparent) 0%, transparent 64%),
            radial-gradient(50% 60% at 62% 82%, color-mix(in srgb, var(--mist) 92%, transparent) 0%, transparent 66%);
  --silk-b: radial-gradient(40% 50% at 68% 36%, color-mix(in srgb, var(--sky-soft) 80%, transparent) 0%, transparent 60%),
            radial-gradient(48% 58% at 30% 72%, color-mix(in srgb, var(--horizon) 48%, transparent) 0%, transparent 64%);
  /* Soft photo-legibility scrims (only over imagery, never as theme) */
  --scrim-bottom: linear-gradient(0deg, rgba(8,26,39,0.62) 0%, rgba(8,26,39,0.18) 38%, rgba(8,26,39,0) 72%);
  --scrim-soft:   linear-gradient(0deg, rgba(8,26,39,0.46) 0%, rgba(8,26,39,0) 60%);

  /* ---- Motion ------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* luxe decelerate */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 380ms;
  --dur-slow: 700ms;
  --dur-reveal: 900ms;

  /* ---- z-index ------------------------------------------ */
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
}

/* Dark context scope, flips semantic tokens for ink sections */
.on-dark,
[data-surface="dark"] {
  --bg: var(--ink);
  --bg-elevated: var(--navy);
  --text: var(--bone);
  --text-muted: rgba(244, 241, 234, 0.72);
  --text-faint: rgba(244, 241, 234, 0.5);
  --accent: var(--sky);
  --accent-bright: var(--sky);
  --divider: var(--line-dark);
  --glass-bg: var(--glass-bg-dark);
  --glass-border: var(--glass-border-dark);
  --glass-shadow: var(--glass-shadow-dark);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; }
}