/* ==========================================================================
   DovaLabs - design tokens v2
   Refresh, not redesign. Same palette, tighter system, full dark-mode support.
   ========================================================================== */

:root {
  /* ---------- Colour: primary brand ---------- */
  --teal:           #2494A8;
  --teal-600:       #1F7E8F;
  --teal-700:       #186778;
  --teal-50:        #ECFEFF;
  --teal-100:       #D6F4F8;

  --charcoal:       #2D2D2D;
  --charcoal-soft:  #3A3A3A;
  --ink:            #111315;          /* deepest text on light */
  --white:          #FFFFFF;

  /* ---------- Colour: accents (sparingly) ---------- */
  --lavender:       #C7D2FE;
  --lavender-soft:  #E6EBFF;
  --coral:          #F97316;
  --pink:           #F43F5E;

  /* ---------- Colour: neutrals ---------- */
  --slate-900:      #1F2937;
  --slate-700:      #374151;
  --slate-500:      #64748B;
  --slate-400:      #94A3B8;
  --slate-300:      #CBD5E1;
  --slate-200:      #E2E8F0;
  --slate-100:      #F1F5F9;
  --slate-50:       #F8FAFC;

  /* ---------- Semantic tokens (light mode) ---------- */
  --bg:             var(--white);
  --bg-subtle:      var(--slate-50);
  --bg-elevated:    var(--white);
  --bg-inverse:     var(--ink);

  --surface:        var(--white);
  --surface-muted:  var(--slate-50);
  --surface-tinted: var(--teal-50);

  --text:           var(--ink);
  --text-muted:     var(--slate-500);
  --text-subtle:    var(--slate-400);
  --text-inverse:   var(--white);

  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-dark:    rgba(255,255,255,0.10);

  --accent:         var(--teal);
  --accent-hover:   var(--teal-600);
  --accent-soft:    var(--teal-50);
  --on-accent:      var(--white);

  /* ---------- Typography ---------- */
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale - slightly more confident at the top end */
  --fs-hero:    clamp(3rem,   5.6vw + 1rem, 5.5rem);
  --fs-display: clamp(2.5rem, 3.6vw + 0.9rem, 4rem);
  --fs-h1:      clamp(2rem,   2.4vw + 0.8rem, 2.75rem);
  --fs-h2:      clamp(1.625rem,1.6vw + 0.6rem, 2.125rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-lead:    1.1875rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --ls-display: -0.03em;
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-loose:   0.08em;

  /* ---------- Spacing (4/8pt grid) ---------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   3.5rem;
  --space-10:  4rem;
  --space-12:  6rem;
  --space-14:  8rem;
  --space-16:  10rem;

  /* ---------- Radius ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Shadow (very light - minimal brand) ---------- */
  --shadow-xs:  0 1px 2px rgba(17,19,21,0.04);
  --shadow-sm:  0 2px 8px rgba(17,19,21,0.05), 0 1px 2px rgba(17,19,21,0.03);
  --shadow-md:  0 8px 24px rgba(17,19,21,0.07), 0 2px 6px rgba(17,19,21,0.04);
  --shadow-lg:  0 24px 56px rgba(17,19,21,0.10), 0 6px 16px rgba(17,19,21,0.05);
  --shadow-glow:0 30px 80px -20px rgba(36,148,168,0.35);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.55, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      160ms;
  --t-med:       260ms;
  --t-slow:      420ms;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(36, 148, 168, 0.35);
}

/* ============================== Dark token set ============================== */
/*
 * Theme behaviour:
 *   - Default: follows OS via prefers-color-scheme
 *   - [data-theme="light"] on <html>: force light (overrides system)
 *   - [data-theme="dark"]  on <html>: force dark  (overrides system)
 *   - [data-theme="auto"]  on <html>: follow system
 *
 * The same dark token block is applied via two rules:
 *   1. @media (prefers-color-scheme: dark) when no explicit theme is set
 *   2. [data-theme="dark"] when the user explicitly chose dark
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1012;
    --bg-subtle:     #15181B;
    --bg-elevated:   #1A1D21;
    --bg-inverse:    #F8FAFC;

    --surface:       #1A1D21;
    --surface-muted: #15181B;
    --surface-tinted:#0F2A30;

    --text:          #F1F4F6;
    --text-muted:    #9CA3AF;
    --text-subtle:   #6B7280;
    --text-inverse:  #111315;

    --border:        rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);

    --accent:        #5BC6D8;
    --accent-hover:  #82D6E5;
    --accent-soft:   rgba(91, 198, 216, 0.12);
    --on-accent:     #0E1012;

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.40);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.45);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.50);
    --shadow-lg:  0 24px 56px rgba(0,0,0,0.55);
    --shadow-glow:0 30px 80px -20px rgba(91,198,216,0.30);
  }
}

:root[data-theme="dark"] {
  --bg:            #0E1012;
  --bg-subtle:     #15181B;
  --bg-elevated:   #1A1D21;
  --bg-inverse:    #F8FAFC;

  --surface:       #1A1D21;
  --surface-muted: #15181B;
  --surface-tinted:#0F2A30;

  --text:          #F1F4F6;
  --text-muted:    #9CA3AF;
  --text-subtle:   #6B7280;
  --text-inverse:  #111315;

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --accent:        #5BC6D8;
  --accent-hover:  #82D6E5;
  --accent-soft:   rgba(91, 198, 216, 0.12);
  --on-accent:     #0E1012;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.50);
  --shadow-lg:  0 24px 56px rgba(0,0,0,0.55);
  --shadow-glow:0 30px 80px -20px rgba(91,198,216,0.30);
}