/* ══════════════════════════════════════════════════════════════════
   OLYTIC PORTAL DESIGN TOKENS v13.0.0
   Single source of truth for all brand colors, typography,
   spacing, and shadow values. Mirrors olyticsolutions.com design
   system. Import this file first in every stylesheet.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --obsidian:     #1A1A1A;
  --navy:         #1B2A4A;
  --gold:         #C8A96E;
  --gold-soft:    rgba(200,169,110,0.12);
  --teal:         #0D6B6E;
  --teal-soft:    #EEF6F6;
  --surface:      #F7F7F5;
  --steel:        #344054;
  --muted:        #667085;
  --border:       #E4E4E2;
  --border-soft:  #F0F0ED;
  --white:        #FFFFFF;
  --red:          #B42318;
  --red-soft:     #FEF3F2;
  --green:        #027A48;
  --green-soft:   #ECFDF3;
  --purple:       #8B5CF6;
  --purple-soft:  rgba(139,92,246,0.12);

  /* ── Semantic Aliases ── */
  --text-primary:   var(--obsidian);
  --text-body:      var(--steel);
  --text-muted:     var(--muted);
  --text-accent:    var(--gold);
  --text-brand:     var(--teal);
  --bg-dark:        var(--obsidian);
  --bg-surface:     var(--surface);

  /* ── Typography ── */
  --font-sans:    'DM Sans', Arial, Helvetica, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Scale (matches olytic-site) */
  --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 */

  /* Line height */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-body:   1.65;

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── Spacing (8-point grid) ── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-pill:  9999px;

  /* ── Shadows (flat, structured: brand spec) ── */
  --shadow-xs:   0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm:   0 2px 6px rgba(26,26,26,0.08);
  --shadow-md:   0 4px 12px rgba(26,26,26,0.10);

  /* ── Layout ── */
  /* Horizontal gutter: left edge of Olytic logo aligns with left edge of page content,
     right edge of profile button aligns with right edge of page content.
     Apply to .topnav__inner padding-left/right AND to any top-level content wrapper. */
  --layout-gutter: 40px;

  /* ── Soft color overlays ── */
  /* --green-soft already defined above as #ECFDF3 */

  /* ── Transitions ── */
  --ease:           240ms ease;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }