/* ============================================================
   Alstra Design System — Foundations
   Type & color tokens. Fonts loaded via Google Fonts (Geist).
   Import this file at the top of any Alstra-branded artifact.
   ============================================================ */

/* Geist + Geist Mono both load locally from ./fonts/. No CDN dependency. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist Mono";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
  /* ── Type families ─────────────────────────────────────── */
  --font-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Core palette ──────────────────────────────────────── */
  /* The system is fundamentally two surfaces: cream (light) and ink (dark).
     Color is used surgically — neutrals dominate, accents do not exist. */
  --cream:        #f4f0e8;   /* primary light surface; warm off-white */
  --cream-2:      #ebe6da;   /* second cream, for cards on cream */
  --ink:          #1a1714;   /* primary dark surface; near-black, warm */
  --ink-2:        #20211e;   /* second ink, used in mesh gradients     */
  --ink-3:        #15161a;   /* deepest ink, for vignette bottoms      */
  --ink-soft:     #3a342c;   /* secondary text on cream                */
  --ink-mute:     #6d655a;   /* muted text / labels on cream           */

  /* ── On-dark foreground ────────────────────────────────── */
  --on-dark:        #f0ebe1;                          /* primary text on ink   */
  --on-dark-mute:   rgba(240, 235, 225, 0.62);        /* secondary text on ink */
  --on-dark-faint:  rgba(240, 235, 225, 0.38);        /* faint / metadata      */
  --on-dark-hair:   rgba(240, 235, 225, 0.14);        /* hairline rules on ink */

  /* ── On-cream foreground ───────────────────────────────── */
  --on-cream:        var(--ink);
  --on-cream-mute:   rgba(26, 23, 20, 0.55);          /* labels, captions     */
  --on-cream-faint:  rgba(26, 23, 20, 0.38);
  --rule:            rgba(26, 23, 20, 0.16);          /* hairline rules cream */

  /* ── Accent: BSOD Blue ─────────────────────────────────── */
  /* The system's single accent — a direct nod to the Win NT bluescreen.
     Used surgically: link underlines, focus rings, the occasional underline
     on the wordmark, and a single tally mark in dense data layouts.
     NEVER as a background fill on layout surfaces. NEVER tinted.            */
  --blue:        #1A1FD3;   /* the canonical accent                          */
  --blue-bright: #2D33F0;   /* hover / active state                          */
  --blue-deep:   #0F12A6;   /* on-cream visited / pressed                    */
  --blue-on-ink: #6166FF;   /* legibility-shifted variant for use on ink     */

  /* ── Atmospheric / scenic ─────────────────────────────── */
  --mesh-green:    #2d362e;     /* hero radial gradient stop */
  --mesh-amber:    #3a3528;     /* hero radial gradient stop */
  --mesh-deep:     #1c1f1c;     /* hero radial gradient stop */
  --horizon:       rgba(26, 23, 20, 0.33);
  --particle:      rgba(220, 212, 195, 0.30);
  --tick:          rgba(240, 235, 225, 0.38);

  /* ── Spacing scale (px) ────────────────────────────────── */
  /* Generous, editorial. Multiples of 4. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 120px;

  /* ── Page gutters ─────────────────────────────────────── */
  --gutter-lg: 60px;     /* desktop side padding   */
  --gutter-md: 32px;     /* tablet                 */
  --gutter-sm: 20px;     /* mobile                 */

  /* ── Borders & rules ──────────────────────────────────── */
  --hairline: 1px;       /* the system uses ONLY 1px rules; never thicker  */
  --radius-0: 0;         /* most surfaces are square-cornered              */
  --radius-1: 2px;       /* used very sparingly, never on large surfaces   */

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* hovers, fades       */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);     /* slow ambient swells */
  --dur-fast:     200ms;                              /* hovers              */
  --dur-mid:      600ms;
  --dur-slow:     22s;                                /* mesh gradient drift */

  /* ── Type scale ───────────────────────────────────────── */
  /* Display weights are 300 (light). Mono labels are 400. */
  --fs-display:   38px;       /* hero tagline                       */
  --fs-headline:  40px;       /* footer headline                    */
  --fs-h1:        32px;       /* large email-style links            */
  --fs-h2:        26px;       /* approach items                     */
  --fs-body-lg:   22px;       /* team paragraph                     */
  --fs-body:      16px;       /* generic body, rarely used at root  */
  --fs-meta:      13px;       /* small wordmark                     */
  --fs-label:     11px;       /* mono labels, nav links             */
  --fs-tick:      10.5px;     /* sub-footer micro type              */

  --lh-tight:     1.12;
  --lh-snug:      1.22;
  --lh-cozy:      1.32;
  --lh-prose:     1.5;

  --tracking-tight:  -0.03em;   /* display + headlines           */
  --tracking-flat:    0;        /* body                          */
  --tracking-label:   0.12em;   /* mono micro labels             */
  --tracking-wordmark:0.28em;   /* the ALSTRA wordmark           */
}

/* ────────────────────────────────────────────────────────────
   Semantic typography classes
   Apply these directly to elements. They encode the system.
   ──────────────────────────────────────────────────────────── */

.alstra-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

.alstra-display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}

.alstra-headline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-headline);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.alstra-h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-cozy);
  letter-spacing: var(--tracking-tight);
}

.alstra-body-lg {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
}

.alstra-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}

.alstra-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.alstra-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────────
   Surfaces — apply to <body> or container
   ──────────────────────────────────────────────────────────── */

.alstra-surface-cream {
  background: var(--cream);
  color: var(--on-cream);
}

.alstra-surface-ink {
  background: var(--ink);
  color: var(--on-dark);
}

/* Hairline rule, the system's only divider. */
.alstra-rule { border: 0; height: 1px; background: var(--rule); }
.alstra-rule--on-ink { background: var(--on-dark-hair); }