/* ────────────────────────────────────────────────────────────────────────────
   TRaaCK · Design System — Core tokens
   Two faces of the same brand:
     · BRAND (dark, editorial) — used in marketing/brand docs, Instrument Serif
     · PRODUCT (light, navy/teal/orange) — used in the actual Expo app
   Both share the same teal + orange signal colors.
──────────────────────────────────────────────────────────────────────────── */

/* ── Fonts ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand palette (dark editorial — marketing, brand docs) ─────────────── */
  --brand-ink:          #0A0E1A;           /* Primary surface 70% */
  --brand-ink-raised:   #12172A;           /* Raised surface */
  --brand-ink-panel:    #151B2E;           /* Panels */
  --brand-paper:        #F4F1EA;           /* Inversion text color */
  --brand-paper-warm:   #ECE7DC;
  --brand-paper-mute:   rgba(244, 241, 234, 0.62);
  --brand-paper-whisper:rgba(244, 241, 234, 0.32);
  --brand-line:         rgba(244, 241, 234, 0.08);
  --brand-line-strong:  rgba(244, 241, 234, 0.14);

  /* ── Signal colors (shared across brand + product) ──────────────────────── */
  --teal:         #00D4AA;   /* Signal · accent · the voice */
  --teal-deep:    #00A788;   /* Teal on paper (brand) */
  --teal-text:    #009B7D;   /* WCAG AA on white — product small text */
  --orange:       #FF6B2B;   /* Moment · achievement · rare usage */
  --ochre:        #C89E3A;   /* Editorial · local Moroccan warmth */

  /* ── Product palette (light — the Expo app) ─────────────────────────────── */
  --navy:         #0F1B2D;   /* Primary ink in-app */
  --navy-mid:     #152A44;
  --navy-top:     #1A3355;
  --bg:           #FFFFFF;
  --surface-1:    #F8F9FA;
  --surface-2:    #F0F2F5;

  --text-primary: #1A1A1A;
  --text-secondary:#666666;
  --text-tertiary:#999999;

  /* ── Semantic ───────────────────────────────────────────────────────────── */
  --success:      #00D4AA;
  --warning:      #FFB020;
  --error:        #E53E3E;
  --score-excellent: #00D4AA;
  --score-good:      #4CAF50;
  --score-ok:        #FFB020;
  --score-low:       #E53E3E;

  /* Premium */
  --premium-gold: #FFD700;
  --premium-bg:   #FFF8E1;

  /* ── Gradients ──────────────────────────────────────────────────────────── */
  --gradient-navy:    linear-gradient(135deg, #0F1B2D 0%, #152A44 50%, #1A3355 100%);
  --gradient-teal:    linear-gradient(135deg, #00E8BC 0%, #00D4AA 100%);
  --gradient-orange:  linear-gradient(135deg, #FF8A50 0%, #FF6B2B 100%);
  --gradient-premium: linear-gradient(135deg, #FFD700 0%, #FFAA00 100%);

  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;  /* Brand, editorial */
  --font-ui:      'Plus Jakarta Sans', system-ui, sans-serif;     /* Product headings */
  --font-body:    'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif; /* Product body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;      /* Data, metadata */

  /* ── Type scale (brand — editorial) ─────────────────────────────────────── */
  --fs-display-xl: clamp(96px, 18vw, 280px);  /* Logo hero */
  --fs-display-lg: clamp(56px, 10vw, 144px);  /* Brand h1 */
  --fs-display-md: clamp(42px, 5.5vw, 76px);  /* Brand h2 */
  --fs-display-sm: 36px;                       /* Brand h3 */

  /* ── Type scale (product — app) ─────────────────────────────────────────── */
  --fs-h1: 28px;  --lh-h1: 36px;
  --fs-h2: 22px;  --lh-h2: 28px;
  --fs-h3: 18px;  --lh-h3: 24px;
  --fs-body: 16px;        --lh-body: 24px;
  --fs-body-sm: 14px;     --lh-body-sm: 20px;
  --fs-caption: 14px;     --lh-caption: 20px;
  --fs-small: 12px;       --lh-small: 16px;
  --fs-micro: 11px;       --lh-micro: 14px;

  --ls-display: -0.025em;
  --ls-tight:   -0.02em;
  --ls-snug:    -0.015em;
  --ls-mono:    0.02em;
  --ls-caps:    0.15em;

  /* ── Spacing (4pt grid) ─────────────────────────────────────────────────── */
  --s-0: 0;     --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 48px;
  --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 120px;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;       /* Inline chips, score chips */
  --r-lg: 12px;       /* Cards (default) */
  --r-xl: 14px;       /* Elevated cards */
  --r-2xl: 16px;      /* Hero cards, buttons (large) */
  --r-3xl: 20px;      /* Avatar tiles */
  --r-pill: 9999px;   /* Badges */
  --r-app: 30px;      /* iOS app icon */

  /* ── Shadows (product) ──────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-md:  0 2px 6px rgba(15, 27, 45, 0.07);
  --shadow-lg:  0 4px 12px rgba(15, 27, 45, 0.10);
  --shadow-overlay: 0 4px 12px rgba(15, 27, 45, 0.25);
  --shadow-orange:  0 4px 10px rgba(255, 107, 43, 0.35);
  --shadow-tab-bar: 0 -2px 8px rgba(15, 27, 45, 0.06);
  --shadow-logo:    0 25px 60px -20px rgba(0, 0, 0, 0.6); /* App icon rendering */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease-out-cubic: cubic-bezier(0.22, 1, 0.36, 1); /* editorial reveals, coach typing */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fade: 180ms;
  --dur-dismiss: 200ms;
  --dur-sheet: 300ms;
  --dur-score-ring: 1200ms;  /* ScoreCircle ease-out-cubic */
  --dur-undo: 5000ms;
}

/* ════════════════════════════════════════════════════════════════════════════
   Semantic type classes
   Use these rather than raw font stacks when writing against the system.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand (editorial, dark) ────────────────────────────────────────────── */
.brand-display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-xl); line-height: 0.88; letter-spacing: var(--ls-display); }
.brand-h1         { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-lg); line-height: 0.92; letter-spacing: var(--ls-display); }
.brand-h2         { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-md); line-height: 1;     letter-spacing: var(--ls-tight); }
.brand-h3         { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-sm); line-height: 1.1;   letter-spacing: var(--ls-snug); }
.brand-lede       { font-family: var(--font-ui);      font-weight: 300; font-size: 20px; line-height: 1.5; }
.brand-italic     { font-style: italic; color: var(--teal); } /* The signature move */
.brand-eyebrow    { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }
.brand-caption    { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-paper-mute); }

/* ── Product (app UI) ──────────────────────────────────────────────────── */
.ui-h1       { font-family: var(--font-ui);   font-weight: 700; font-size: var(--fs-h1);      line-height: var(--lh-h1); }
.ui-h2       { font-family: var(--font-ui);   font-weight: 700; font-size: var(--fs-h2);      line-height: var(--lh-h2); }
.ui-h3       { font-family: var(--font-ui);   font-weight: 600; font-size: var(--fs-h3);      line-height: var(--lh-h3); }
.ui-body     { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-body); }
.ui-body-med { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body);    line-height: var(--lh-body); }
.ui-caption  { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.ui-small    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small);   line-height: var(--lh-small); }
.ui-num      { font-family: var(--font-ui);   font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-mono     { font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--ls-mono); }

/* ── Section-tag (mono eyebrow with numbered prefix) ────────────────────── */
.section-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-paper-whisper); }
.section-tag .num { color: var(--teal); margin-right: 14px; font-weight: 500; }