/* =============================================================
   nicspire.ch — Colors & Type foundation
   Canonical design tokens, lifted verbatim from the brand
   style guide v1.1 (nicspire-website/CLAUDE.md §3).

   Two layers:
     1. BASE TOKENS   — raw palette, type scale, spacing, radii
     2. SEMANTIC VARS — role-based aliases + ready type styles

   Font note: nicspire ships NO webfonts. The brand face is the
   system font "Trebuchet MS" (humanist sans). The @font-face
   below declares it via local() only — it uses the installed
   system copy where present and falls back to the humanist
   stack elsewhere. No Google Fonts, no CDN, no substitute
   family — by brand rule. If a licensed Trebuchet .woff2 is
   ever uploaded, add a url() src to this same rule. See README.
   ============================================================= */

/* Declare the brand face as a SYSTEM font (local sources only).
   This is not a substitution — it resolves to the user's
   installed 'Trebuchet MS'; absent that, --font-primary's
   fallback stack renders. */
@font-face {
  font-family: 'Trebuchet MS';
  src: local('Trebuchet MS'), local('TrebuchetMS'), local('Trebuchet');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── 1. BASE TOKENS ─────────────────────────────────── */

  /* Dark backgrounds */
  --color-midnight:   #0D2137;   /* Primary dark bg — Midnight */
  --color-steel:      #153352;   /* Secondary dark surface — Steel */
  --color-steel-mid:  #112D4A;   /* Intermediate dark surface */

  /* Aliases used throughout markup */
  --color-navy:       #0D2137;   /* = Midnight — hero, nav, footer */
  --color-navy-mid:   #112D4A;   /* = Steel Mid — mobile menu, cards */

  /* Borders on dark — Arctic Cyan tinted (NOT white-alpha) */
  --color-navy-border:        rgba(34, 211, 238, 0.18);
  --color-navy-border-bright: rgba(34, 211, 238, 0.38);

  /* Accent — Arctic Cyan (PRIMARY brand signal) */
  --color-cyan:        #22D3EE;
  --color-cyan-hover:  #1ABFCF;
  --color-cyan-dim:    rgba(34, 211, 238, 0.10);
  --color-cyan-border: rgba(34, 211, 238, 0.18);

  /* Highlight palette (used sparingly) */
  --color-teal:        #2DD4BF;   /* Electric Teal — featured content */
  --color-signal-blue: #4FACFE;   /* Signal Blue — secondary accent */
  --color-champagne:   #D4B896;   /* Champagne — premium moments */

  /* Light sections */
  --color-bg-page:     #FFFFFF;
  --color-bg-light:    #F3F7FB;
  --color-border-light:#DDE6F0;

  /* Text on light */
  --color-text-primary:   #0D2137;
  --color-text-secondary: #4A6070;
  --color-text-muted:     #8EA0B8;

  /* Text on dark (exact brand opacity values) */
  --color-on-dark-primary:   #FFFFFF;
  --color-on-dark-secondary: rgba(255, 255, 255, 0.68);  /* body copy */
  --color-on-dark-muted:     rgba(255, 255, 255, 0.35);  /* captions */
  --color-on-dark-ghost:     rgba(255, 255, 255, 0.06);  /* card fills */

  /* Type family — system font only */
  --font-primary: 'Trebuchet MS', 'Gill Sans MT', 'Century Gothic', sans-serif;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;

  /* Weights — exact brand spec */
  --weight-display: 800;   /* Hero headlines, wordmark, big numerals */
  --weight-heading: 700;   /* Section titles, card headings */
  --weight-regular: 400;   /* Body copy, eyebrow labels */
  --weight-light:   200;   /* ".ch" in wordmark — accent contrast only */
  --weight-medium:  700;   /* Legacy alias → resolves to heading */

  /* Line height */
  --leading-tight: 1.25;
  --leading-base:  1.75;
  --leading-loose: 1.8;

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* Radii */
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 20px;

  /* Layout */
  --max-width:   1140px;
  --page-gutter: 40px;

  /* ─── 2. SEMANTIC TYPE ROLES ─────────────────────────── */
  /* Convenience aliases so designs can read role-first.     */

  --display:  var(--weight-display) var(--text-2xl)/var(--leading-tight) var(--font-primary);
  --h1:       var(--weight-display) var(--text-2xl)/var(--leading-tight) var(--font-primary);
  --h2:       var(--weight-heading) var(--text-xl)/var(--leading-tight)  var(--font-primary);
  --h3:       var(--weight-heading) var(--text-md)/var(--leading-tight)  var(--font-primary);
  --body:     var(--weight-regular) var(--text-base)/var(--leading-base) var(--font-primary);
  --body-sm:  var(--weight-regular) var(--text-sm)/var(--leading-base)   var(--font-primary);
  --caption:  var(--weight-regular) var(--text-xs)/var(--leading-base)   var(--font-primary);
}

/* Optional reset hooks — apply if you want the semantic roles
   to take effect on bare elements. Not required by the site. */
.ds-type h1 { font: var(--h1);  color: var(--color-text-primary); margin: 0; }
.ds-type h2 { font: var(--h2);  color: var(--color-text-primary); margin: 0; }
.ds-type h3 { font: var(--h3);  color: var(--color-text-primary); margin: 0; }
.ds-type p  { font: var(--body); color: var(--color-text-secondary); margin: 0 0 1em; }

/* The eyebrow — a brand signature: small all-caps tracked label
   in Arctic Cyan. No background, no border. */
.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cyan);
}