/* DS Gleebem Liquid Glass Tokens v1.0.0 — 2026-04-10 */

:root {
  /* ═══════════════════════════════════════════════
     a) BRAND COLOR SCALES (HSL)
     ═══════════════════════════════════════════════ */

  /* Navy — Primary brand */
  --navy-50:  213 72% 96%;
  --navy-100: 213 62% 90%;
  --navy-200: 213 52% 78%;
  --navy-300: 213 48% 62%;
  --navy-400: 213 52% 48%;
  --navy-500: 213 76% 30%;   /* #123E88 */
  --navy-600: 213 80% 24%;
  --navy-700: 213 82% 21%;   /* #0D2B5E */
  --navy-800: 213 84% 16%;
  --navy-900: 213 86% 10%;

  /* Teal — Accent */
  --teal-50:  173 62% 96%;
  --teal-100: 173 58% 88%;
  --teal-200: 173 52% 74%;
  --teal-300: 173 50% 58%;
  --teal-400: 173 56% 46%;
  --teal-500: 173 66% 40%;   /* #23B5A7 */
  --teal-600: 173 70% 34%;
  --teal-700: 173 72% 28%;
  --teal-800: 173 74% 22%;
  --teal-900: 173 76% 14%;

  /* Blue — CTA */
  --blue-50:  216 88% 97%;
  --blue-100: 216 82% 90%;
  --blue-200: 216 76% 78%;
  --blue-300: 216 72% 64%;
  --blue-400: 216 80% 56%;
  --blue-500: 216 82% 52%;   /* #1E6DEB */
  --blue-600: 216 84% 44%;
  --blue-700: 216 86% 36%;
  --blue-800: 216 88% 28%;
  --blue-900: 216 90% 18%;

  /* Charcoal */
  --charcoal-500: 216 48% 20%;  /* #1A2B4A */
  --charcoal-700: 216 52% 14%;
  --charcoal-900: 216 56% 8%;

  /* Neutral */
  --neutral-50:  220 24% 98%;   /* #FAFBFC */
  --neutral-100: 220 20% 96%;   /* #F4F6FA */
  --neutral-200: 220 18% 90%;
  --neutral-300: 220 14% 82%;
  --neutral-400: 220 12% 64%;
  --neutral-500: 220 10% 46%;
  --neutral-600: 220 10% 36%;   /* safe on light bg — ~5.8:1 */
  --neutral-700: 220 12% 28%;
  --neutral-800: 220 14% 18%;
  --neutral-900: 220 16% 8%;

  /* ═══════════════════════════════════════════════
     b) GLASS SURFACES — Light variant
     ═══════════════════════════════════════════════ */

  /* Glass light — standard (layer 3) */
  --gl:         rgba(255, 255, 255, 0.72);
  --gl-blur:    16px;
  --gl-sat:     180%;
  --gl-hv:      rgba(255, 255, 255, 0.88);
  --gl-bdr:     rgba(255, 255, 255, 0.52);
  --gl-bdg:     rgba(35, 181, 167, 0.22);   /* teal tint */
  --gl-in:      inset 0 1px 0 rgba(255, 255, 255, 0.68);  /* lensing top edge */
  --gl-in-bottom: inset 0 -1px 0 rgba(18, 62, 136, 0.06);

  /* Glass light — dense (layer 4 — nav) */
  --gl-dense:   rgba(255, 255, 255, 0.82);
  --gl-dense-blur: 24px;
  --gl-dense-bdr:  rgba(255, 255, 255, 0.62);

  /* Glass dark variant */
  --gd:         rgba(18, 62, 136, 0.72);
  --gd-blur:    18px;
  --gd-sat:     180%;
  --gd-card:    rgba(13, 43, 94, 0.78);
  --gd-bdr:     rgba(255, 255, 255, 0.12);
  --gd-in:      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --gd-in-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  /* ═══════════════════════════════════════════════
     c) TYPOGRAPHY
     ═══════════════════════════════════════════════ */

  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Modular scale — base 16px, ratio ~1.25 */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fs-3xl:  1.875rem;   /* 30px */
  --fs-4xl:  2.25rem;    /* 36px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  3.75rem;    /* 60px */
  --fs-7xl:  4.5rem;     /* 72px */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.8;

  --ls-tight:   -0.04em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.22em;

  /* Hero title */
  --fs-hero: clamp(2.5rem, 5vw, 5rem);
  /* Section header */
  --fs-section: clamp(1.75rem, 2.8vw, 2.35rem);

  /* ═══════════════════════════════════════════════
     d) SPACING — 4px base
     ═══════════════════════════════════════════════ */

  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ═══════════════════════════════════════════════
     e) BORDER-RADIUS
     ═══════════════════════════════════════════════ */

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  32px;
  --r-pill: 9999px;

  /* ═══════════════════════════════════════════════
     f) SHADOWS — tonal, not excessive
     ═══════════════════════════════════════════════ */

  --sh-sm:   0 4px 12px rgba(18, 43, 94, 0.06);
  --sh-md:   0 12px 32px rgba(18, 43, 94, 0.10);
  --sh-lg:   0 24px 64px rgba(18, 43, 94, 0.14);
  --sh-xl:   0 32px 80px rgba(18, 43, 94, 0.18);
  --sh-teal: 0 16px 40px rgba(35, 181, 167, 0.18);
  --sh-blue: 0 18px 36px rgba(30, 109, 235, 0.24);

  /* ═══════════════════════════════════════════════
     g) TRANSITIONS — iOS-like spring physics
     ═══════════════════════════════════════════════ */

  --t-spring:  240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-smooth:  320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    150ms cubic-bezier(0, 0, 0.2, 1);
  --t-macro:   480ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════
     SEMANTIC COLOR MAPPING
     ═══════════════════════════════════════════════ */

  --color-bg:            hsl(var(--neutral-100));
  --color-surface:       hsl(var(--neutral-50));
  --color-surface-low:   hsl(var(--neutral-100));
  --color-text:          hsl(var(--navy-500));
  --color-text-muted:    hsl(var(--neutral-500));
  --color-text-subtle:   hsl(var(--neutral-400));
  --color-primary:       hsl(var(--navy-500));
  --color-accent:        hsl(var(--teal-500));
  --color-cta:           hsl(var(--blue-500));
  --color-border:        hsl(var(--neutral-200));
  --color-border-subtle: rgba(18, 62, 136, 0.08);

  /* Semantic badges */
  --badge-success-bg:  hsl(152 62% 94%);
  --badge-success-fg:  hsl(152 68% 28%);
  --badge-success-bdr: hsl(152 52% 82%);
  --badge-warning-bg:  hsl(42 90% 94%);
  --badge-warning-fg:  hsl(32 82% 32%);
  --badge-warning-bdr: hsl(42 70% 82%);
  --badge-error-bg:    hsl(0 72% 94%);
  --badge-error-fg:    hsl(0 68% 36%);
  --badge-error-bdr:   hsl(0 52% 84%);
  --badge-info-bg:     hsl(var(--blue-50));
  --badge-info-fg:     hsl(var(--blue-700));
  --badge-info-bdr:    hsl(var(--blue-200));
}

/* ═══════════════════════════════════════════════
   DARK MODE TOKENS (for dark sections)
   ═══════════════════════════════════════════════ */

[data-theme="dark"],
.theme-dark {
  --color-bg:          hsl(var(--navy-700));
  --color-surface:     hsl(var(--navy-600));
  --color-surface-low: hsl(var(--navy-800));
  --color-text:        hsl(0 0% 96%);
  --color-text-muted:  hsl(0 0% 72%);
  --color-text-subtle: hsl(0 0% 52%);
  --color-border:      rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
}