/* =========================================================================
   BibleWatch — Color & Type Tokens
   Source of truth: Presentation/* (SwiftUI codebase)

   Mapping notes:
   - SwiftUI Color.actionPrimary      → --color-primary
   - SwiftUI Color.bookWatchPrimary   → --color-primary  (same value, alias)
   - SwiftUI Color.bookWatchAccent    → --color-primary  (same value, alias)
   - SwiftUI Color.bookWatchBackground (cinema) → --color-cinema-bg
   - SwiftUI Color.textPrimary        → --color-ink
   - SwiftUI Color.textSecondary      → --color-ink-2
   - SwiftUI Color.textTertiary       → --color-ink-3
   - .appLargeTitle / .appTitle / etc → --type-* semantic tokens

   Fonts: Outfit (UI) + Antonio (display, substituting "Archive").
   Loaded from Google Fonts in :root @import. Override with self-hosted .ttf
   when Archive is licensed.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Antonio:wght@500;600;700;800&display=swap');

:root {
  /* ─── Brand color (cyan sky-blue) ─────────────────────────────────── */
  --color-primary:        #4FC3F7;   /* actionPrimary / bookWatchPrimary */
  --color-primary-hover:  #29B6F6;
  --color-primary-press:  #0288D1;
  --color-primary-soft:   rgba(79, 195, 247, 0.12);
  --gradient-primary:     linear-gradient(180deg, #4FC3F7 0%, #29B6F6 100%);

  /* ─── Cinema surfaces (dark mode / hero / video) ──────────────────── */
  --color-cinema-bg:      #0D0D1E;   /* deep navy page */
  --color-cinema-surface: #1B1B37;   /* card */
  --color-cinema-raised:  #2D2D5E;   /* raised card / picker bg */
  --color-cinema-deep:    #292956;   /* synopsis fill */
  --gradient-cinema:      linear-gradient(180deg, #0D0D1E 0%, #1B1B37 60%, #2D2D5E 100%);
  --gradient-cinema-soft: linear-gradient(180deg, #2D4A5C 0%, #1B2F3B 100%);

  /* ─── Daylight surfaces (default app + marketing site) ────────────── */
  --color-page:           #E9F4FC;   /* MainTabView light */
  --color-page-soft:      #F4F9FE;
  --color-card:           #FFFFFF;
  --color-card-tinted:    #DDEEFB;   /* A6D1F2 @ 0.35 over white */

  /* ─── Ink ─────────────────────────────────────────────────────────── */
  --color-ink:            #0F172A;   /* textPrimary */
  --color-ink-2:          #4A5568;   /* textSecondary */
  --color-ink-3:          #94A3B8;   /* textTertiary daylight */
  --color-ink-on-cinema:  #FFFFFF;
  --color-ink-on-cinema-2: rgba(255,255,255,0.72);
  --color-ink-on-cinema-3: rgba(255,255,255,0.50);
  --color-ink-tint:       #A6D1F2;   /* light blue tint used in dark mode */

  /* ─── Accents (warm + nature) ─────────────────────────────────────── */
  --color-accent-peach:   #FF9D6F;   /* testimonials, stat highlights */
  --color-accent-gold:    #FFD55B;   /* streaks, KP rewards */
  --color-accent-orange:  #FFB347;   /* loading + commitment */
  --color-accent-green:   #5FD4A0;   /* completion, positive */
  --color-accent-green-2: #4CAF50;   /* deeper green for badges */
  --color-accent-red:     #DC143C;   /* destructive / pact stamp */

  /* ─── Hairlines + dividers ────────────────────────────────────────── */
  --color-hairline:           rgba(15, 23, 42, 0.08);
  --color-hairline-cinema:    rgba(255, 255, 255, 0.06);
  --color-divider:            rgba(15, 23, 42, 0.10);
  --color-divider-cinema:     rgba(255, 255, 255, 0.10);

  /* ─── Semantic / state ────────────────────────────────────────────── */
  --color-success: var(--color-accent-green);
  --color-warning: var(--color-accent-gold);
  --color-danger:  var(--color-accent-red);
  --color-info:    var(--color-primary);

  /* ─── Spacing scale (8pt base, mirrors SwiftUI .spacing1..7) ──────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;
  --space-11: 128px;

  /* ─── Radius ──────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── Shadows ─────────────────────────────────────────────────────── */
  --shadow-xs:           0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm:           0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:           0 8px 24px rgba(15,23,42,0.10);
  --shadow-lg:           0 16px 40px rgba(15,23,42,0.16);
  --shadow-xl:           0 24px 60px rgba(15,23,42,0.22);
  --shadow-glow:         0 8px 20px rgba(79,195,247,0.40);
  --shadow-glow-strong:  0 12px 28px rgba(79,195,247,0.55);
  --shadow-cinema-card:  0 12px 32px rgba(0,0,0,0.45);

  /* ─── Motion ──────────────────────────────────────────────────────── */
  --ease-smooth:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 80ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-page: 600ms;

  /* ─── Type — fonts ────────────────────────────────────────────────── */
  --font-ui:      'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Antonio', 'Outfit', system-ui, sans-serif; /* Archive substitute */
  --font-mono:    'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* ─── Type — semantic (1:1 with SwiftUI .app* tokens) ─────────────── */
  /* extra-large title — onboarding hero, sign-up screens                  */
  --type-app-extra-large-title-size:    44px;
  --type-app-extra-large-title-weight:  800;
  --type-app-extra-large-title-line:    1.05;
  --type-app-extra-large-title-tracking: -0.015em;

  /* large title — hero on most screens                                   */
  --type-app-large-title-size:    34px;
  --type-app-large-title-weight:  800;  /* `.weight(.heavy)` */
  --type-app-large-title-line:    1.10;
  --type-app-large-title-tracking: -0.012em;

  /* title — section openers                                              */
  --type-app-title-size:    28px;
  --type-app-title-weight:  700;
  --type-app-title-line:    1.15;
  --type-app-title-tracking: -0.008em;

  /* title 2 — rail labels, modal titles                                  */
  --type-app-title-2-size:   22px;
  --type-app-title-2-weight: 700;
  --type-app-title-2-line:   1.20;
  --type-app-title-2-tracking: -0.004em;

  /* title 3 — card titles                                                */
  --type-app-title-3-size:   18px;
  --type-app-title-3-weight: 600;
  --type-app-title-3-line:   1.30;

  /* headline — emphasised body                                           */
  --type-app-headline-size:   16px;
  --type-app-headline-weight: 600;
  --type-app-headline-line:   1.40;

  /* subheadline                                                          */
  --type-app-subheadline-size:   15px;
  --type-app-subheadline-weight: 500;
  --type-app-subheadline-line:   1.45;

  /* body                                                                 */
  --type-app-body-size:   16px;
  --type-app-body-weight: 400;
  --type-app-body-line:   1.50;

  /* callout                                                              */
  --type-app-callout-size:   15px;
  --type-app-callout-weight: 400;
  --type-app-callout-line:   1.50;

  /* footnote                                                             */
  --type-app-footnote-size:   13px;
  --type-app-footnote-weight: 400;
  --type-app-footnote-line:   1.45;

  /* caption                                                              */
  --type-app-caption-size:   12px;
  --type-app-caption-weight: 500;
  --type-app-caption-line:   1.40;

  /* caption 2                                                            */
  --type-app-caption-2-size:   11px;
  --type-app-caption-2-weight: 500;
  --type-app-caption-2-line:   1.40;

  /* badge text — gamification chips                                      */
  --type-badge-size:    10px;
  --type-badge-weight:  800;
  --type-badge-line:    1;
  --type-badge-tracking: 0.04em;

  /* button label                                                         */
  --type-button-size:   16px;
  --type-button-weight: 600;
  --type-button-line:   1;

  /* eyebrow (uppercase kicker — INSPIRE SELF-GROWTH WITH)                */
  --type-eyebrow-size:   13px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-line:   1;
  --type-eyebrow-tracking: 0.16em;

  /* display wordmark (Archive substitute)                                */
  --type-wordmark-size:   28px;
  --type-wordmark-weight: 700;
  --type-wordmark-tracking: 0.06em;

  /* jumbo icon                                                           */
  --type-jumbo-icon-size: 80px;
  --type-large-icon-size: 32px;
}

/* =========================================================================
   Element-level mappings — drop this into any HTML page and headings
   render in-brand without per-class styling.
   ========================================================================= */

html, body {
  font-family: var(--font-ui);
  color: var(--color-ink);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-ui);
  font-size:   var(--type-app-large-title-size);
  font-weight: var(--type-app-large-title-weight);
  line-height: var(--type-app-large-title-line);
  letter-spacing: var(--type-app-large-title-tracking);
  text-wrap: balance;
}

h2, .h2 {
  font-size:   var(--type-app-title-size);
  font-weight: var(--type-app-title-weight);
  line-height: var(--type-app-title-line);
  letter-spacing: var(--type-app-title-tracking);
  text-wrap: balance;
}

h3, .h3 {
  font-size:   var(--type-app-title-2-size);
  font-weight: var(--type-app-title-2-weight);
  line-height: var(--type-app-title-2-line);
}

h4, .h4 {
  font-size:   var(--type-app-title-3-size);
  font-weight: var(--type-app-title-3-weight);
  line-height: var(--type-app-title-3-line);
}

p, .body {
  font-size:   var(--type-app-body-size);
  font-weight: var(--type-app-body-weight);
  line-height: var(--type-app-body-line);
  text-wrap: pretty;
}

small, .footnote {
  font-size:   var(--type-app-footnote-size);
  font-weight: var(--type-app-footnote-weight);
  line-height: var(--type-app-footnote-line);
  color: var(--color-ink-2);
}

.caption {
  font-size:   var(--type-app-caption-size);
  font-weight: var(--type-app-caption-weight);
  line-height: var(--type-app-caption-line);
  color: var(--color-ink-2);
}

.eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.wordmark {
  font-family: var(--font-display);
  font-size:   var(--type-wordmark-size);
  font-weight: var(--type-wordmark-weight);
  letter-spacing: var(--type-wordmark-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}

.accent { color: var(--color-primary); }

/* on cinema surfaces */
.on-cinema, .on-cinema * {
  color: var(--color-ink-on-cinema);
}
.on-cinema small,
.on-cinema .footnote,
.on-cinema .caption,
.on-cinema .eyebrow {
  color: var(--color-ink-on-cinema-2);
}