/* ============================================================
   Personal AI — Colors & Type tokens
   Source: /Design Figma frames, METADATA.md usage counts
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

/* ---- TASA Orbiter (brand face) ----
   Three optical sizes:
     Display  — hero/display (largest type)
     Deck     — mid (section headers, slides)
     Text     — body / UI
*/
@font-face { font-family: "TASA Orbiter Display"; src: url("fonts/TASAOrbiterDisplay-Regular-BF64891cba1d563.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Display"; src: url("fonts/TASAOrbiterDisplay-Medium-BF64891cba56e9b.otf")  format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Display"; src: url("fonts/TASAOrbiterDisplay-SemiBold-BF64891cba47942.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Display"; src: url("fonts/TASAOrbiterDisplay-Bold-BF64891cba5ae6f.otf")   format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Display"; src: url("fonts/TASAOrbiterDisplay-Black-BF64891cba23c21.otf")  format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "TASA Orbiter Deck"; src: url("fonts/TASAOrbiterDeck-Regular-BF64891cba23854.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Deck"; src: url("fonts/TASAOrbiterDeck-Medium-BF64891cba192ce.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Deck"; src: url("fonts/TASAOrbiterDeck-SemiBold-BF64891cba48835.otf")  format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Deck"; src: url("fonts/TASAOrbiterDeck-Bold-BF64891cba35ec7.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "TASA Orbiter Text"; src: url("fonts/TASAOrbiterText-Regular-BF64891cba384f3.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Text"; src: url("fonts/TASAOrbiterText-Medium-BF64891cb9e8a75.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Text"; src: url("fonts/TASAOrbiterText-SemiBold-BF64891cba09cfc.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "TASA Orbiter Text"; src: url("fonts/TASAOrbiterText-Bold-BF64891cba00f5b.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- Neutrals ---- */
  --pai-ink:            #1A1C21;  /* body text, dark sections (852× in Figma) */
  --pai-ink-80:         rgba(26,28,33,0.80);
  --pai-ink-72:         rgba(26,28,33,0.72);
  --pai-ink-08:         rgba(26,28,33,0.08);
  --pai-slate:          #616673;  /* secondary text (127×) */
  --pai-slate-light:    #9297A5;  /* tertiary text on dark */
  --pai-paper:          #F6F5F3;  /* warm off-white sections (144×) */
  --pai-paper-alt:      #FAFAFA;
  --pai-rule:           #DEE0E5;  /* 1px dividers (62×) */
  --pai-rule-soft:      #E4E2E1;  /* 64× */
  --pai-white:          #FFFFFF;
  --pai-white-24:       rgba(255,255,255,0.24);
  --pai-white-16:       rgba(255,255,255,0.16);
  --pai-white-12:       rgba(255,255,255,0.12);

  /* ---- Brand accents ---- */
  --pai-memory:         #A09EFF;  /* lavender (272×) — MEMORY token */
  --pai-memory-12:      rgba(160,158,255,0.12);
  --pai-memory-24:      rgba(160,158,255,0.24);
  --pai-context:        #FFA965;  /* apricot (190×) — CONTEXT token */
  --pai-context-alt:    #F4AD71;  /* softer variant */
  --pai-context-16:     rgba(244,173,113,0.16);
  --pai-context-24:     rgba(244,173,113,0.24);
  --pai-identity:       var(--pai-ink-08);
  --pai-identity-text:  var(--pai-ink-72);

  /* ---- Signature brand ---- */
  --pai-purple-deep:    #6756FF;  /* vivid purple (104×) — footer diamond, sparingly */
  --pai-sky:            #6FC2FF;  /* secondary accent (33×) — graph dots */

  /* ---- Semantic ---- */
  --fg-1:               var(--pai-ink);
  --fg-2:               var(--pai-slate);
  --fg-3:               var(--pai-slate-light);
  --fg-inverse:         var(--pai-white);
  --fg-mute-dark:       var(--pai-slate-light);
  --bg-1:               var(--pai-white);
  --bg-2:               var(--pai-paper);
  --bg-inverse:         var(--pai-ink);
  --bg-cta-band:        var(--pai-memory);
  --border-1:           var(--pai-rule);
  --border-2:           var(--pai-rule-soft);
  --border-dark:        var(--pai-white-16);
  --border-dark-soft:   rgba(222,224,229,0.12);

  /* ---- Type families ---- */
  --font-sans:    "TASA Orbiter Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-deck:    "TASA Orbiter Deck", var(--font-sans);
  --font-display: "TASA Orbiter Display", var(--font-sans);
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* ---- Type scale (sizes / line-heights / tracking from Figma) ---- */
  --text-hero:       64px;  --lh-hero:    72px;   --ls-hero:    -0.03em;
  --text-h1:         56px;  --lh-h1:      64px;   --ls-h1:      -0.03em;
  --text-h2:         48px;  --lh-h2:      64px;   --ls-h2:      -0.03em;
  --text-h3:         40px;  --lh-h3:      48px;   --ls-h3:      -0.03em;
  --text-h4:         32px;  --lh-h4:      40px;   --ls-h4:      -0.03em;
  --text-title:      24px;  --lh-title:   32px;   --ls-title:   -0.02em;
  --text-lede:       20px;  --lh-lede:    32px;   --ls-lede:    -0.03em;
  --text-body:       16px;  --lh-body:    24px;   --ls-body:    -0.02em;
  --text-small:      14px;  --lh-small:   20px;   --ls-small:   -0.03em;
  --text-tiny:       12px;  --lh-tiny:    14px;   --ls-tiny:    -0.03em;

  /* ---- Weights ---- */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-sb:  600;
  --fw-bd:  700;

  /* ---- Radii, borders, spacing ---- */
  --r-sm:  4px;
  --r-md:  4px;      /* Personal AI uses 4px almost universally */
  --r-pill: 625px;
  --r-full: 9999px;

  --border-w: 1px;

  --gap-xs: 4px;
  --gap-s:  8px;
  --gap-m:  16px;
  --gap-l:  24px;
  --gap-xl: 32px;
  --gap-2xl: 48px;
  --gap-3xl: 80px;

  /* Gutters */
  --gutter-desktop: 80px;
  --gutter-mobile:  24px;
  --content-max:    1440px;

  /* ---- Shadows (mostly none) ---- */
  --shadow-none: none;
  --shadow-glow-white: 0 0 17.938px 0 rgba(255,255,255,0.9);
  --shadow-focus: 0 0 0 3px rgba(160,158,255,0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-weight: var(--fw-med);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-weight: var(--fw-med);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin: 0;
}
h4, .h4 {
  font-weight: var(--fw-med);
  font-size: var(--text-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin: 0;
}

p, .body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg-2);
  margin: 0;
}

.lede {
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--ls-lede);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-bd);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-title);
  color: var(--fg-1);
}

.tag {
  /* ALL-CAPS capsule token */
  font-family: var(--font-mono);
  font-weight: var(--fw-bd);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-med);
  font-size: var(--text-body);
}

.caption {
  font-family: var(--font-mono);
  font-weight: var(--fw-med);
  font-size: var(--text-tiny);
  line-height: var(--lh-tiny);
  letter-spacing: var(--ls-tiny);
  color: var(--fg-2);
}