/* ============================================================
   VAELO — shared design foundation (vaelo.me)
   Single source of truth for tokens + self-hosted fonts.

   Every color token below is sourced from the shipped iOS app,
   not from the previous per-page website values (which had
   drifted, with the same token name meaning different things
   on different pages).

   Provenance (app repo, ios/Atman/Atman/):
     --bg            ContentView.swift:34, AtmanApp.swift:103
                     Color(red: 9/255, green: 9/255, blue: 15/255)
     --bg-deep       Views/Home/HomeSignalCardsView.swift:626
     --surface       Views/Home/VaeloPerspectiveCardStack.swift:262
     --teal          Views/Home/HomeSignalCardsView.swift:82 (and 6 more)
     --teal-deep     Views/Home/HomeView.swift:244
     --gold          Views/Analytics/Tabs/Signal/PatternCard.swift:309
     --rose          Views/Home/HomeSignalCardsView.swift:338
   ============================================================ */


/* ---- Self-hosted fonts (Google Fonts CDN no longer needed) ----
   DM Serif Display ships Regular + Italic only; there is no bold,
   by design. DM Sans is a single variable file covering
   opsz 9..40 and wght 100..1000.
   Both faces are licensed under the SIL Open Font License 1.1.
   Files vendored from Google Fonts (fonts.gstatic.com), latin subset. */

@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2') tech('variations'),
       url('fonts/DMSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}


/* ---- Design tokens ---- */

:root {

  /* Color: canvas + surfaces (from the app, see provenance above) */
  --bg:           #09090F;                    /* root background, every screen */
  --bg-deep:      #0d0d12;                    /* full-bleed detail views */
  --surface:      #131318;                    /* card base */
  --hairline:        rgba(255, 255, 255, 0.07);  /* default border / divider */
  --hairline-strong: rgba(255, 255, 255, 0.13);  /* emphasized border */

  /* Color: accents (from the app) */
  --teal:      #4ecdc4;   /* primary accent: positive signal, CTAs, links */
  --teal-deep: #2abfaa;   /* saturated teal variant (Home accents) */
  --gold:      #c9a96e;   /* scarce accent: energy/clarity patterns, premium moments */
  --rose:      #e8708a;   /* data contexts only: negative valence, intensity */

  /* Color: text. Three tiers, same meaning on every page.
     (The old per-page CSS gave --text2 a different value on the
     legal pages than on index.html; these replace all of that.) */
  --text-primary:   rgba(255, 255, 255, 0.96);  /* display, headings */
  --text-secondary: rgba(255, 255, 255, 0.72);  /* body copy */
  --text-tertiary:  rgba(255, 255, 255, 0.45);  /* captions, labels, fine print */

  /* Type: families */
  --font-serif: 'DM Serif Display', 'Didot', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Type: modular scale (px) — use these, never ad-hoc sizes */
  --type-xs:   12px;   /* fine print, kickers */
  --type-sm:   15px;   /* UI labels, small body */
  --type-base: 17px;   /* body */
  --type-md:   22px;   /* leads, small headings */
  --type-lg:   32px;   /* section headings */
  --type-xl:   48px;   /* large headings */
  --type-2xl:  72px;   /* display */
  --type-3xl:  116px;  /* hero display */

  /* Space: scale (px) — vertical rhythm and layout gaps */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 160px;
}