/* ============================================================
   AZYRO SA — Design Tokens
   Source of truth: 20251127_Azyro Logo Usage Booklet (v1.0)
   Every value below maps 1:1 to the brand charter.
   When porting to WordPress, expose these as ACF settings
   or theme.json variables for consistency.
   ============================================================ */

:root {
  /* ---- Primary palette ---- */
  --color-mint:        #3ECFA0;  /* Azyro Mint — primary accent, CTAs, headings, icons (Pantone 345 C) */
  --color-night:       #0D1117;  /* Azyro Night — primary background (Pantone Black 6 C) */
  --color-white:       #FFFFFF;  /* Pure White — body text on dark, reversed logo */

  /* ---- Mint gradient stops (extracted from the Azyro icon) ----
     The logo helix flows cool → mint → warm. Use these together as a
     gradient for headlines, big numbers and accent surfaces. Single-stop
     mint (#3ECFA0) remains the canonical brand colour for small UI
     (HUD strokes, icons, borders) so it never gets muddy. */
  --color-mint-cool:   #4FBED2;  /* upper-left of the helix — cyan/teal (used ONLY inside the gradient, never solid on text) */
  --color-teal:        #3BB3B8;  /* logo gradient teal — secondary accent used VERY sparingly */
  --color-mint-warm:   #5EE090;  /* lower-right of the helix — spring green (used in the gradient) */
  --color-mint-deep:   #2BA37D;  /* darker authoritative mint (scientific / selected state) */
  --color-mint-night:  #228B6E;  /* even deeper green nuance for data sections — still clearly green, no blue cast */
  --gradient-mint:        linear-gradient(135deg, var(--color-mint-cool) 0%, var(--color-mint) 50%, var(--color-mint-warm) 100%);
  --gradient-mint-soft:   linear-gradient(135deg, rgba(79, 190, 210, 0.95) 0%, var(--color-mint) 50%, rgba(94, 224, 144, 0.95) 100%);
  --gradient-mint-line:   linear-gradient(90deg,  transparent 0%, var(--color-mint-cool) 25%, var(--color-mint) 55%, var(--color-mint-warm) 80%, transparent 100%);

  /* ---- Secondary palette ---- */
  --color-deep-navy:   #161D27;  /* Card backgrounds, section dividers (Pantone 296 C) */
  --color-forest:      #1A2A22;  /* Elevated card surfaces (Pantone 350 C) */
  --color-mint-tint:   #F4FAF7;  /* Light-mode fill, table stripes */
  --color-slate:       #8A9BA8;  /* Secondary text, labels, captions */
  --color-alert:       #E74C3C;  /* Warnings, error states ONLY — never decorative */

  /* ---- Functional aliases ---- */
  --bg-base:           var(--color-night);
  --bg-card:           var(--color-deep-navy);
  --bg-card-elevated:  var(--color-forest);
  --text-primary:      var(--color-white);
  --text-muted:        var(--color-slate);
  --accent:            var(--color-mint);
  --border:            rgba(62, 207, 160, 0.16);   /* mint @ 16% — section dividers */
  --border-strong:     var(--color-mint);
  --hairline:          rgba(255, 255, 255, 0.08);

  /* ---- Typography ----
     Per charter: Inter (or Arial fallback). JetBrains Mono for code/data. */
  --font-sans: 'Inter', 'Arial', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  /* Type scale — charter sizes, converted from pt to rem (16px base = 1rem ≈ 12pt) */
  --fs-display:    clamp(2.5rem, 4vw + 1rem, 4.5rem);  /* H1, hero — flexes responsively from charter 36pt */
  --fs-h1:         clamp(2rem, 2.5vw + 1rem, 3rem);
  --fs-h2:         clamp(1.5rem, 1.5vw + 1rem, 2rem);   /* charter 24pt */
  --fs-h3:         1.25rem;                              /* charter 18pt */
  --fs-body-lg:    1.0625rem;                            /* charter 14pt */
  --fs-body:       1rem;                                 /* charter 11pt scaled for web legibility */
  --fs-caption:    0.8125rem;                            /* charter 9pt */
  --fs-mono:       0.875rem;                             /* charter 10pt */

  /* Weights */
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Line-height — charter: 1.5× body, 1.2× headings */
  --lh-tight:     1.2;
  --lh-body:      1.55;

  /* ---- Spacing scale (8-pt base) ---- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24  ← charter grid gutter */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40  ← charter min margin */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 6rem;      /* 96 */
  --space-11: 8rem;      /* 128 */

  /* ---- Layout ---- */
  --container-max:    1200px;
  --container-pad:    var(--space-7);  /* 40px — charter digital margin */
  --grid-gutter:      var(--space-5);  /* 24px — charter */

  /* ---- Radii ---- */
  --r-card:     8px;     /* charter: 6–8 px on digital */
  --r-pill:     999px;
  --r-input:    6px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.2, 0.7, 0.1, 1);
  --t-fast:     150ms;
  --t-base:     250ms;
  --t-slow:     450ms;

  /* ---- Brand gradient (the logo helix) ---- */
  --gradient-logo: var(--gradient-mint);
}

/* Forced color-scheme — Azyro is dark-first per charter */
html { color-scheme: dark; }