/* ================================================
   TONIC DESK — Design Tokens
   Sage & Slate: teal-emerald + warm slate
   "The refreshing CRM"
   ================================================ */

/* Self-hosted Plus Jakarta Sans — Latin subset, variable font */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Latin-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ============================================
     RAMP 1: TONIC — sage-warm teal-emerald
     Brand mark sits at 500. Greener-warmer than
     stock iOS-mint #14b8a6; pulled toward sage
     so it reads natural, not synthetic.
     ============================================ */
  --tonic-50:  #ecfbf5;
  --tonic-100: #d2f5e6;
  --tonic-200: #a7ebcf;
  --tonic-300: #6fdab3;
  --tonic-400: #38c599;
  --tonic-500: #0fb39e;  /* brand */
  --tonic-600: #0a8f80;
  --tonic-700: #0a7268;
  --tonic-800: #0c5a54;
  --tonic-900: #0b4945;
  --tonic-950: #042b28;

  /* ============================================
     RAMP 2: GIN — cool cream off-white canvas
     Tint family only (4 stops). Page canvas, not
     pure white. Reads as paper, not LCD.
     ============================================ */
  --gin-50:  #F6F4EE;
  --gin-100: #EFEBE0;
  --gin-200: #E5DFD0;
  --gin-300: #D6CCB7;

  /* ============================================
     RAMP 3: CITRUS — dimensional lemon ramp
     Luminance and hue both shift across the ramp
     so gradients refract instead of looking flat.
     50 cool cream-yellow → 500 bright tonic
     yellow → 700-800 amber citrus oil → 950 deep
     amber-brown.
     ============================================ */
  --citrus-50:  #FFFBE6;
  --citrus-100: #FFF4B8;
  --citrus-200: #FFE980;
  --citrus-300: #FFDD3D;
  --citrus-400: #FFD300;
  --citrus-500: #F5C400;  /* brand yellow */
  --citrus-600: #DDA80A;
  --citrus-700: #B07F0C;
  --citrus-800: #82590E;
  --citrus-900: #573A0B;
  --citrus-950: #2E1D04;

  /* ============================================
     RAMP 4: SLATE — custom cooler slate
     Tailwind slate shifted ~6° hue cooler/bluer.
     Includes 950 for dark-mode page background.
     ============================================ */
  --slate-50:  #f6f8fb;
  --slate-100: #eef1f6;
  --slate-200: #dde3ec;
  --slate-300: #c4cdda;
  --slate-400: #8a96a8;
  --slate-500: #5a6678;
  --slate-600: #404c5e;
  --slate-700: #2e3849;
  --slate-800: #1c2433;
  --slate-900: #111826;
  --slate-950: #060912;

  /* ============================================
     RAMP 5: QUININE — UV-blue fluorescence
     Used 1-2%: focus rings, primary-button glow.
     Four stops only.
     ============================================ */
  --quinine-300: #b3d4ff;
  --quinine-400: #6fa8ff;
  --quinine-500: #3a7dff;
  --quinine-600: #1f5cf0;

  /* ============================================
     ALIAS LAYER — back-compat with existing CSS
     Do not remove. layout.css/components.css/
     utilities.css reference these names; the
     aliases let us swap underlying ramps without
     touching consumers.
     ============================================ */
  --color-primary-50:  var(--tonic-50);
  --color-primary-100: var(--tonic-100);
  --color-primary-200: var(--tonic-200);
  --color-primary-300: var(--tonic-300);
  --color-primary-400: var(--tonic-400);
  --color-primary-500: var(--tonic-500);
  --color-primary-600: var(--tonic-600);
  --color-primary-700: var(--tonic-700);
  --color-primary-800: var(--tonic-800);
  --color-primary-900: var(--tonic-900);
  --color-primary-950: var(--tonic-950);

  --color-neutral-50:  var(--slate-50);
  --color-neutral-100: var(--slate-100);
  --color-neutral-200: var(--slate-200);
  --color-neutral-300: var(--slate-300);
  --color-neutral-400: var(--slate-400);
  --color-neutral-500: var(--slate-500);
  --color-neutral-600: var(--slate-600);
  --color-neutral-700: var(--slate-700);
  --color-neutral-800: var(--slate-800);
  --color-neutral-900: var(--slate-900);
  --color-neutral-950: var(--slate-950);

  --color-accent-50:  var(--citrus-50);
  --color-accent-100: var(--citrus-100);
  --color-accent-200: var(--citrus-200);
  --color-accent-300: var(--citrus-300);
  --color-accent-400: var(--citrus-400);
  --color-accent-500: var(--citrus-500);
  --color-accent-600: var(--citrus-600);
  --color-accent-700: var(--citrus-700);
  --color-accent-800: var(--citrus-800);
  --color-accent-900: var(--citrus-900);
  --color-accent-950: var(--citrus-950);

  /* Legacy yellow/accent names */
  --color-yellow:       var(--citrus-400);
  --color-yellow-light: var(--citrus-100);
  --color-yellow-dark:  var(--citrus-700);
  --color-accent:       var(--citrus-400);
  --color-accent-light: var(--citrus-100);

  /* Status colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-danger:  #ef4444;
  --color-danger-light: #fee2e2;
  --color-info:    var(--quinine-500);
  --color-info-light: var(--quinine-300);

  /* ============================================
     SEMANTIC SURFACE TOKENS
     Map the intent layer onto the ramps. Dark
     mode re-maps only these — ramps stay frozen.
     ============================================ */
  --bg:            var(--gin-50);
  --bg-elevated:   #ffffff;
  --bg-muted:      var(--slate-50);
  --bg-inverse:    var(--slate-950);
  --text:          var(--slate-900);
  --text-muted:    var(--slate-600);
  --text-soft:     var(--slate-500);
  --text-inverse:  var(--gin-50);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --brand:         var(--tonic-500);
  /* --brand-emphasis: link colour. Tonic-700 = 5.42:1 on --gin-50,
     passes WCAG 1.4.3 AA for normal text. Was tonic-600 (3.63:1, fail). */
  --brand-emphasis:var(--tonic-700);
  --brand-soft:    var(--tonic-50);
  --accent:        var(--citrus-500);
  --focus-ring:    var(--quinine-500);

  /* Legacy semantic aliases — keep existing CSS resolving */
  --bg-body:           var(--bg);
  --bg-surface:        var(--bg-elevated);
  --bg-surface-raised: var(--bg-elevated);
  /* Light: dimensional citrus gradient with a brighter radial highlight
     behind the lower-right where the screenshot sits, so the hero looks
     "lit" rather than flat. */
  --bg-hero: radial-gradient(ellipse 75% 60% at 65% 70%, var(--citrus-300) 0%, var(--citrus-400) 45%, transparent 90%),
             linear-gradient(145deg, var(--citrus-400) 0%, var(--citrus-500) 100%);
  --text-primary:      var(--text);
  --text-secondary:    var(--text-muted);
  --text-on-dark:      var(--gin-50);
  --text-on-primary:   #ffffff;
  --border-color:      var(--border);
  --border-subtle:     var(--slate-100);
  --ring-color:        rgba(15, 179, 158, 0.18);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Fluid type scale — clamp() driven, 1.25 ratio (major third) */
  --font-size-xs:      clamp(0.75rem,  0.73rem + 0.10vw, 0.8125rem);
  --font-size-sm:      clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --font-size-base:    clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
  --font-size-lg:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl:      clamp(1.375rem, 1.25rem + 0.60vw, 1.625rem);
  --font-size-2xl:     clamp(1.75rem,  1.50rem + 1.20vw, 2.25rem);
  --font-size-3xl:     clamp(2.25rem,  1.90rem + 1.80vw, 3rem);
  --font-size-display: clamp(2.75rem,  2.20rem + 2.80vw, 4rem);
  --font-size-hero:    clamp(3rem,     2.00rem + 5.00vw, 5.5rem);

  /* Legacy aliases — class names in components.css still use 4xl/5xl/6xl */
  --font-size-4xl: var(--font-size-3xl);
  --font-size-5xl: var(--font-size-display);
  --font-size-6xl: var(--font-size-hero);

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-display: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.01em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.05em;

  /* ============================================
     SHADOWS — tinted with tonic at low alpha
     for warm-glass feel in light mode. Dark
     mode overrides below.
     ============================================ */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:     0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px -2px rgba(15, 179, 158, 0.18), 0 2px 4px -1px rgba(15, 179, 158, 0.10);
  --shadow-lg:  0 12px 28px -6px rgba(15, 179, 158, 0.20), 0 4px 10px -2px rgba(15, 179, 158, 0.10);
  --shadow-xl:  0 24px 48px -10px rgba(15, 179, 158, 0.22), 0 8px 16px -6px rgba(15, 179, 158, 0.10);
  --shadow-2xl: 0 32px 64px -16px rgba(15, 23, 42, 0.28);
  --shadow-glow:    0 0 20px rgba(15, 179, 158, 0.18);
  --shadow-glow-lg: 0 0 40px rgba(15, 179, 158, 0.22);

  /* Radii */
  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --content-max:    1200px;
  --content-narrow: 800px;
  --content-wide:   1400px;
  --navbar-height:  64px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ================================================
   DARK MODE
   Re-maps semantic tokens only. Ramps are frozen.
   The :not([data-theme="light"]) gate inside the
   media query lets an explicit light override win.
   The standalone [data-theme="dark"] selector
   enables a programmatic toggle.
   ================================================ */
[data-theme="dark"] {
  --bg:            var(--slate-950);
  --bg-elevated:   var(--slate-900);
  --bg-muted:      color-mix(in oklch, var(--slate-900) 70%, var(--slate-800));
  --bg-inverse:    var(--gin-50);
  --text:          var(--gin-50);
  --text-muted:    var(--slate-300);
  --text-soft:     var(--slate-400);
  --text-inverse:  var(--slate-950);
  --border:        var(--slate-800);
  --border-strong: var(--slate-700);
  --brand:         var(--tonic-400);
  --brand-emphasis:var(--tonic-300);
  --brand-soft:    var(--slate-900);
  --accent:        var(--citrus-400);

  /* Legacy aliases follow the semantic flip */
  --bg-body:           var(--bg);
  --bg-surface:        var(--bg-elevated);
  --bg-surface-raised: var(--bg-elevated);
  /* Dark mode hero: bold "lit cocktail" — a bright citrus spotlight at
     lower-right behind the screenshot against a deep slate-950 base,
     with a subtle sage-emerald tonic accent at upper-left for the
     gin-and-tonic colour story. Title text sits on the slate area
     = cream (--text) reads clean; screenshot sits inside the yellow
     halo = bold focal point. */
  --bg-hero:
    radial-gradient(ellipse 85% 70% at 65% 70%,
      var(--citrus-300) 0%,
      var(--citrus-400) 22%,
      var(--citrus-500) 45%,
      color-mix(in oklch, var(--citrus-700) 55%, transparent) 72%,
      transparent 92%),
    radial-gradient(ellipse 55% 50% at 15% 20%,
      color-mix(in oklch, var(--tonic-400) 28%, transparent) 0%,
      transparent 65%),
    linear-gradient(165deg, var(--slate-950) 0%, var(--slate-900) 100%);
  --text-primary:      var(--text);
  --text-secondary:    var(--text-muted);
  --text-on-dark:      var(--gin-50);
  --border-color:      var(--border);
  --border-subtle:     var(--slate-800);
  --ring-color:        rgba(56, 197, 153, 0.30);

  /* Heavier, untinted shadows in dark mode */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow:     0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 6px 16px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 16px 32px -6px rgba(0, 0, 0, 0.60), 0 6px 12px -4px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 28px 56px -10px rgba(0, 0, 0, 0.65), 0 10px 20px -6px rgba(0, 0, 0, 0.45);
  --shadow-2xl: 0 36px 72px -16px rgba(0, 0, 0, 0.75);
  --shadow-glow:    0 0 32px rgba(245, 196, 0, 0.40);
  --shadow-glow-lg: 0 0 56px rgba(245, 196, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--slate-950);
    --bg-elevated:   var(--slate-900);
    --bg-muted:      color-mix(in oklch, var(--slate-900) 70%, var(--slate-800));
    --bg-inverse:    var(--gin-50);
    --text:          var(--gin-50);
    --text-muted:    var(--slate-300);
    --text-soft:     var(--slate-400);
    --text-inverse:  var(--slate-950);
    --border:        var(--slate-800);
    --border-strong: var(--slate-700);
    --brand:         var(--tonic-400);
    --brand-emphasis:var(--tonic-300);
    --brand-soft:    var(--slate-900);
    --accent:        var(--citrus-400);

    --bg-body:           var(--bg);
    --bg-surface:        var(--bg-elevated);
    --bg-surface-raised: var(--bg-elevated);
    --bg-hero:
      radial-gradient(ellipse 85% 70% at 65% 70%,
        var(--citrus-300) 0%,
        var(--citrus-400) 22%,
        var(--citrus-500) 45%,
        color-mix(in oklch, var(--citrus-700) 55%, transparent) 72%,
        transparent 92%),
      radial-gradient(ellipse 55% 50% at 15% 20%,
        color-mix(in oklch, var(--tonic-400) 28%, transparent) 0%,
        transparent 65%),
      linear-gradient(165deg, var(--slate-950) 0%, var(--slate-900) 100%);
    --text-primary:      var(--text);
    --text-secondary:    var(--text-muted);
    --text-on-dark:      var(--gin-50);
    --border-color:      var(--border);
    --border-subtle:     var(--slate-800);
    --ring-color:        rgba(56, 197, 153, 0.30);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:     0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:  0 6px 16px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 16px 32px -6px rgba(0, 0, 0, 0.60), 0 6px 12px -4px rgba(0, 0, 0, 0.45);
    --shadow-xl:  0 28px 56px -10px rgba(0, 0, 0, 0.65), 0 10px 20px -6px rgba(0, 0, 0, 0.45);
    --shadow-2xl: 0 36px 72px -16px rgba(0, 0, 0, 0.75);
    --shadow-glow:    0 0 24px rgba(56, 197, 153, 0.30);
    --shadow-glow-lg: 0 0 48px rgba(56, 197, 153, 0.35);
  }
}