/* ============================================================
   GPSoul.Ai — Foundations (v3, synced from canonical repo tokens)
   Source of truth:
     • apps/mobile/src/constants/colors.ts
     • apps/mobile/src/constants/typography.ts
     • apps/mobile/src/constants/spacing.ts
   When the repo updates, re-run the GitHub ingest and update this file.
   ============================================================ */

/* ---------- POPPINS (local TTFs) ---------- */
@font-face { font-family: 'Poppins'; font-weight: 100; font-style: normal; src: url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 100; font-style: italic; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 200; font-style: normal; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 200; font-style: italic; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: italic; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: italic; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: italic; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: italic; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: italic; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: italic; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: italic; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

/* ---------- CORMORANT GARAMOND (display-only, self-hosted variable) ---------- */
/* Variable axis: weight 300–700. Use font-weight to select cut. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* ── Brand ── */
  --c-purple:      #9459E7;
  --c-purple-deep: #7B3FF2;
  --c-azure:       #3C5DD0;
  --c-salmon:      #FF9985;
  --c-crimson:     #C83853;
  --c-gold:        #FFBE0A;
  --c-cyan:        #00D4FF;
  --c-pink:        #FF6B9D;

  /* ── Surfaces (MD3) ── */
  --s-dim:                #0C0C20;
  --s-base:               #111125;
  --s-container-low:      #19192E;
  --s-container:          #1E1E32;
  --s-container-high:     #28283D;
  --s-container-highest:  #333349;
  --s-bright:             #37374D;

  /* ── Deprecated aliases (still referenced by legacy components) ── */
  --bg-dark:    #0B0B1F;
  --bg-card:    #1A1A2E;
  --bg-surface: #2A2A4A;

  /* ── Legacy accents ── */
  --c-teal:   #0D9488;
  --c-amber:  #D97706;

  /* ── Text ── */
  --t-primary:   #FFFFFF;
  --t-secondary: #A0AEC0;
  --t-muted:     #64748B;

  /* ── Semantic ── */
  --c-success: #4ADE80;
  --c-warning: #FFBE0A;
  --c-error:   #C83853;

  /* ── Rarity (encounter system) ── */
  --rarity-common:    #4ADE80;
  --rarity-rare:      #3C5DD0;
  --rarity-sacred:    #9459E7;
  --rarity-legendary: #FFBE0A;

  /* ── Portal accents ── */
  --portal-lunar:    #B794F4;
  --portal-solar:    #FFBE0A;
  --portal-ethereal: #F8FAFC;
  --portal-festival: #FF9985;

  /* ── Spacing ── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-xxl: 64px;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* ── Type families ── */
  --ff-sans:    'Poppins', system-ui, sans-serif;
  --ff-display: 'Cormorant Garamond', Georgia, serif;

  /* ── Brand-aligned page accents (used by landing.css + privacy.css) ── */
  --accent-cool:  #B494F0;
}

/* ============================================================
   Type styles — mirrors `TYPE` token map in typography.ts
   ============================================================ */
.t-wordmark { font-family: var(--ff-sans); font-weight: 800; font-size: 52px; letter-spacing: -1.5px; }
.t-display  { font-family: var(--ff-sans); font-weight: 600; font-style: italic; font-size: 28px; line-height: 36px; }
.t-headline { font-family: var(--ff-sans); font-weight: 600; font-size: 22px; line-height: 28px; }
.t-title    { font-family: var(--ff-sans); font-weight: 600; font-size: 18px; line-height: 24px; }
.t-subtitle { font-family: var(--ff-sans); font-weight: 500; font-size: 16px; line-height: 22px; }
.t-body     { font-family: var(--ff-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--t-secondary); }
.t-body-sm  { font-family: var(--ff-sans); font-weight: 400; font-size: 13px; line-height: 18px; }
.t-caption  { font-family: var(--ff-sans); font-weight: 400; font-size: 11px; line-height: 15px; color: var(--t-muted); }
.t-button   { font-family: var(--ff-sans); font-weight: 600; font-size: 17px; letter-spacing: 0.3px; }
.t-eyebrow  { font-family: var(--ff-sans); font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }

/* Display variants — Cormorant only for ceremonial moments */
.t-display-serif  { font-family: var(--ff-display); font-weight: 500; font-style: italic; font-size: clamp(34px, 5vw, 56px); line-height: 1.1; }
.t-display-bold   { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.01em; }

/* ============================================================
   Helpers
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  background: var(--s-base);
  color: var(--t-primary);
  -webkit-font-smoothing: antialiased;
}

/* Mystic gradient text — for spiritual emphasis */
.mystic {
  background: linear-gradient(96deg, var(--c-purple) 0%, #C567E0 50%, var(--c-salmon) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gold-spirit gradient — used for Soul Points, achievements */
.spirit-gold {
  background: linear-gradient(96deg, var(--c-gold), var(--c-salmon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}