/* ==========================================================================
   IDZY — Design Tokens
   Single source of truth for the site's brand values. These are lifted
   verbatim from the brand kit (docs/brand/) — do NOT invent new values here.
   If the brand kit changes, this file changes; nothing else should hard-code
   a hex or font name.
   ========================================================================== */

:root {
  /* --- Brand colour system (from the IDZY brand kit) --------------------- */
  --color-primary:   #0B132B;  /* Deep Midnight — headings, primary          */
  --color-secondary: #475569;  /* Slate Grey — body copy                     */
  --color-bg:        #F8FAFC;  /* Ice White — page background                */
  --color-cobalt:    #1E40AF;  /* Electric Cobalt — accent                   */
  --color-teal:      #0D9488;  /* Signal Teal — secondary accent            */
  --color-border:    #E2E8F0;  /* Border / divider                          */
  --color-card-bg:   #FFFFFF;  /* Card surface                              */

  /* --- Pillar accent mapping -------------------------------------------- */
  /* The mechanism that keeps four division pages feeling like one system
     while staying distinguishable. Each maps to an existing brand colour. */
  --color-advisory:    var(--color-cobalt);   /* Advisory   → Electric Cobalt */
  --color-capability:  var(--color-primary);  /* Capability → Deep Midnight   */
  --color-technology:  var(--color-teal);     /* Technology → Signal Teal     */
  /* Enablement has no dedicated brand accent yet. This PLACEHOLDER reuses
     Slate Grey (an existing token — not an invented value) so the four-page
     system is colour-complete. Swap for a dedicated accent if the brand kit
     gains one — see BACKLOG.md "Enablement accent colour". */
  --color-enablement:  var(--color-secondary);

  /* --- Typography (from the brand kit) ---------------------------------- */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* --- Layout scale (web-only; not brand identity, safe to tune) --------- */
  --container:        1120px;  /* max width of the main content column       */
  --container-narrow:  760px;  /* prose / form column                        */
  --gutter:           clamp(1.25rem, 5vw, 3rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Type scale (rem; 1rem = 16px) */
  --text-sm:    0.8125rem;  /* 13px — mono labels, notes         */
  --text-base:  1.0625rem;  /* 17px — body                       */
  --text-lg:    1.25rem;    /* 20px — lead paragraphs            */
  --text-h3:    1.5rem;     /* card / sub headings               */
  --text-h2:    clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); /* section headings */
  --text-h1:    clamp(2rem, 1.2rem + 3vw, 3rem);       /* page titles */
  --text-hero:  clamp(2.5rem, 1.4rem + 4.5vw, 4rem);   /* hero titles */

  --line-body: 1.65;
  --line-tight: 1.15;
  /* Display leading. Cormorant Garamond is a Garamond revival: at hero sizes its
     ascenders and descenders already separate the lines, so --line-tight leaves a
     visible gap. Applied to .hero h1 only; --line-tight still governs h2 and h3,
     where the looser setting is correct. */
  --line-display: 1.05;

  --radius:  2px;   /* subtle softening on interactive elements; cards stay crisp */
  --shadow:  0 10px 25px rgba(11, 19, 43, 0.06);
  --shadow-sm: 0 1px 2px rgba(11, 19, 43, 0.05);

  --transition: 160ms ease;
}