/*
 * =========================================================
 * OLYTIC SOLUTIONS - Global Design Tokens
 * tokens.css
 *
 * Single source of truth for all brand colors, typography,
 * spacing, and shadow values. Import this file first in
 * every page stylesheet or layout shell.
 *
 * Usage:  color: var(--color-obsidian);
 * =========================================================
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ─── Root tokens ──────────────────────────────────────── */

:root {

  /* ── Brand Colors ── */
  --color-obsidian:     #1A1A1A;   /* Dark BGs, cover pages, primary headings          */
  --color-navy:         #1B2A4A;   /* Section headings, table headers, structural       */
  --color-gold:         #C8A96E;   /* Accent only - rule lines, CTA highlights, labels  */
  --color-surface:      #F7F7F5;   /* Card BGs, callout boxes, alt table rows           */
  --color-body-steel:   #344054;   /* All body text, captions, standard copy            */
  --color-muted:        #667085;   /* Sub-labels, metadata, footer text                 */
  --color-teal:         #0D6B6E;   /* Brand identifier label, header/footer rule lines  */

  /* ── Semantic / Functional Colors ── */
  --color-success:      #16A34A;   /* Positive outcomes, growth metrics                 */
  --color-danger:       #DC2626;   /* Warnings, risk indicators - use sparingly         */
  --color-caution:      #D97706;   /* Caution, current-state indicators                 */

  /* ── Background Aliases ── */
  --bg-dark:            var(--color-obsidian);
  --bg-dark-alt:        var(--color-navy);
  --bg-surface:         var(--color-surface);
  --bg-white:           #FFFFFF;

  /* ── Text Aliases ── */
  --text-primary:       var(--color-obsidian);
  --text-body:          var(--color-body-steel);
  --text-muted:         var(--color-muted);
  --text-on-dark:       #FFFFFF;
  --text-accent:        var(--color-gold);
  --text-brand:         var(--color-teal);

  /* ── Border / Rule ── */
  --border-default:     1px solid #E4E4E2;
  --border-gold:        1px solid var(--color-gold);
  --border-gold-rule:   1px solid var(--color-gold);
  --border-gold-thick:  3px solid var(--color-gold);
  --border-teal:        2px solid var(--color-teal);

  /* ─────────────────────────────────────────────────── */
  /* Typography                                          */
  /* ─────────────────────────────────────────────────── */

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

  /* ── Scale - Web ── */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px - body copy floor */
  --text-md:      1.125rem;   /* 18px - comfortable body */
  --text-lg:      1.25rem;    /* 20px - large body / H6  */
  --text-xl:      1.5rem;     /* 24px - H5              */
  --text-2xl:     1.875rem;   /* 30px - H4              */
  --text-3xl:     2.25rem;    /* 36px - H3              */
  --text-4xl:     3rem;       /* 48px - H2              */
  --text-5xl:     3.75rem;    /* 60px - H1 desktop      */
  --text-hero:    4.5rem;     /* 72px - hero display    */

  /* ── Line Height ── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-body:   1.65;   /* Brand spec for web body copy */
  --leading-loose:  1.8;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-label:   0.1em;   /* DM Mono labels - brand spec 1.5–2px equiv */
  --tracking-caps:    0.15em;

  /* ── Font 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 */
  --space-32:  8rem;      /* 128px */

  /* ─────────────────────────────────────────────────── */
  /* Layout                                              */
  /* ─────────────────────────────────────────────────── */

  --max-width-xs:   480px;
  --max-width-sm:   640px;
  --max-width-md:   768px;
  --max-width-lg:   1024px;
  --max-width-xl:   1200px;   /* Standard content container */
  --max-width-2xl:  1400px;   /* Wide/hero sections */

  --nav-height:     72px;
  --nav-height-mobile: 60px;

  /* ─────────────────────────────────────────────────── */
  /* Elevation / Shadows                                 */
  /* ─────────────────────────────────────────────────── */

  /* Brand spec: flat and structured - no heavy drop shadows */
  --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);

  /* ─────────────────────────────────────────────────── */
  /* Border Radius                                       */
  /* ─────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  /* ─────────────────────────────────────────────────── */
  /* Transitions                                         */
  /* ─────────────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ─────────────────────────────────────────────────── */
  /* Z-Index Stack                                       */
  /* ─────────────────────────────────────────────────── */

  --z-base:     0;
  --z-above:    10;
  --z-nav:      100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}