/* ============================================================
   CHRONLY — Design Tokens
   All CSS custom properties. Import first.
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --ink-950:        #0D141A;
  --ink-900:        #1E2A32;
  --ink-700:        #2E3D49;
  --ink-600:        #4C5B66;
  --ink-400:        #7A8E9A;
  --ink-200:        #B8C8D2;
  --ink-100:        #D8E4EC;
  --ink-050:        #EEF4F8;

  --paper-50:       #FAF8F3;
  --paper-100:      #F0EBE0;
  --paper-200:      #E0D8C8;

  --teal-800:       #1A3538;
  --teal-700:       #234649;
  --teal-600:       #2F5D62;
  --teal-500:       #3E7A81;
  --teal-400:       #569AA1;
  --teal-200:       #A8D4D8;
  --teal-100:       #D4EAED;

  --amber-500:      #D48E24;
  --amber-400:      #E8A33D;
  --amber-300:      #F5BC66;
  --amber-100:      #FDF0D5;

  --sage-700:       #4E7352;
  --sage-600:       #5D8A62;
  --sage-500:       #7A9E7E;
  --sage-400:       #9CC2A0;
  --sage-100:       #DCEFE0;

  --coral-600:      #B84E38;
  --coral-500:      #D9694F;
  --coral-400:      #E8856D;
  --coral-100:      #FADFDA;

  /* Dark mode palette */
  --dark-bg:        #12181C;
  --dark-surface:   #1B2328;
  --dark-surface-2: #222C33;
  --dark-border:    rgba(255,255,255,0.08);
  --dark-text:      #E8EDF0;
  --dark-muted:     #8FA4B0;

  /* ── Semantic Colors (light mode defaults) ── */
  --color-bg:           var(--paper-50);
  --color-bg-card:      var(--paper-100);
  --color-text:         var(--ink-900);
  --color-text-muted:   var(--ink-600);
  --color-text-faint:   var(--ink-400);
  --color-border:       rgba(30,42,50,0.10);
  --color-border-strong:rgba(30,42,50,0.18);
  --color-accent:       var(--teal-600);
  --color-accent-hover: var(--teal-700);
  --color-highlight:    var(--amber-400);
  --color-positive:     var(--sage-500);
  --color-caution:      var(--coral-500);
  --color-surface:      var(--paper-100);
  --color-surface-2:    var(--paper-200);

  /* ── Gradients ── */
  --gradient-brand:     linear-gradient(135deg, #2F5D62 0%, #7A9E7E 100%);
  --gradient-brand-text: linear-gradient(135deg, #2F5D62 0%, #5D9E62 50%, #7A9E7E 100%);
  --gradient-hero-bg:   radial-gradient(ellipse 80% 60% at 60% 40%, rgba(47,93,98,0.08) 0%, transparent 70%);
  --gradient-card:      linear-gradient(160deg, rgba(250,248,243,0.9) 0%, rgba(240,235,224,0.7) 100%);

  /* ── Typography ── */
  --font-heading:   'Fraunces', 'Georgia', serif;
  --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   2.875rem;  /* 46px */
  --text-5xl:   3.5rem;    /* 56px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Spacing ── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(30,42,50,0.06);
  --shadow-sm:  0 2px 8px rgba(30,42,50,0.08);
  --shadow-md:  0 4px 16px rgba(30,42,50,0.10);
  --shadow-lg:  0 8px 32px rgba(30,42,50,0.12);
  --shadow-xl:  0 16px 48px rgba(30,42,50,0.16);
  --shadow-glow:0 0 24px rgba(47,93,98,0.20);

  /* ── Glassmorphism ── */
  --glass-bg:      rgba(250, 248, 243, 0.68);
  --glass-border:  rgba(30, 42, 50, 0.08);
  --glass-shadow:  0 8px 32px rgba(30, 42, 50, 0.10);
  --glass-blur:    blur(16px) saturate(150%);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
  --duration-menu: 160ms;

  /* ── Layout ── */
  --max-width:      1240px;
  --content-width:  800px;
  --header-h:       68px;
  --section-py:     var(--sp-20);

  /* ── Z-Index ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-menu:    200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg:           var(--dark-bg);
  --color-bg-card:      var(--dark-surface);
  --color-text:         var(--dark-text);
  --color-text-muted:   var(--dark-muted);
  --color-text-faint:   #617A89;
  --color-border:       var(--dark-border);
  --color-border-strong:rgba(255,255,255,0.14);
  --color-surface:      var(--dark-surface);
  --color-surface-2:    var(--dark-surface-2);
  --glass-bg:           rgba(27, 35, 40, 0.72);
  --glass-border:       rgba(255,255,255,0.07);
  --glass-shadow:       0 8px 32px rgba(0,0,0,0.30);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}