/* ============================================================
 * The Sovereign Academy — tokens.css
 * Canonical source: sovereign-academy-hub/css/tokens.css
 * Synced to bitcoin-sovereign-academy/ and financially-sovereign-academy/
 * via scripts/sync-tokens.sh
 *
 * Sub-project #1 — tokens migration
 * Spec: docs/superpowers/specs/2026-05-01-tokens-migration.md (BSA repo)
 * Locked: 2026-05-01
 * ============================================================ */

/* Typography baseline (3rd amendment to original brand spec) */
html { font-size: 13px; }

:root {
  /* ============================================================
   * Light marketing palette
   * ============================================================ */
  --lm-canvas:          #fafaf7;
  --lm-surface:         #ffffff;
  --lm-subtle:          #f5f5f1;
  --lm-border-subtle:   #e5e7eb;
  --lm-border-strong:   #d1d5db;
  --lm-text-primary:    #1a1f2e;
  --lm-text-secondary:  #374151;
  --lm-text-muted:      #6b7280;
  --lm-text-faint:      #9ca3af;

  /* ============================================================
   * Dark learning palette
   * ============================================================ */
  --dm-canvas:          #0b0e14;
  --dm-surface:         #121723;
  --dm-subtle:          #1b2433;
  --dm-border-subtle:   #202938;
  --dm-border-strong:   #2d3748;
  --dm-text-primary:    #e6edf3;
  --dm-text-secondary:  #cbd2da;
  --dm-text-muted:      #9aa4b2;
  --dm-text-faint:      #6b7280;

  /* ============================================================
   * Accents — Bitcoin (orange family)
   * ============================================================ */
  --accent-bitcoin-decorative:    #f7931a;
  --accent-bitcoin-text-on-light: #b45309;
  --accent-bitcoin-text-on-dark:  #ffb347;

  /* ============================================================
   * Accents — Financial (emerald family)
   * ============================================================ */
  --accent-financial-decorative:    #0d9668;
  --accent-financial-text-on-light: #047857;
  --accent-financial-text-on-dark:  #6ee7b7;

  /* ============================================================
   * Gradients (per spec amendment 2026-05-01)
   * Permitted on 3 surfaces only: card outlines, icon strokes/fills,
   * headline text (h1/h2/h3). Never on backgrounds/buttons/body text.
   * ============================================================ */
  --brand-gradient:           linear-gradient(135deg, #f7931a 0%, #ffd700 100%);
  --brand-gradient-financial: linear-gradient(135deg, #0d9668 0%, #6ee7b7 100%);

  /* ============================================================
   * Semantic alerts
   * ============================================================ */
  --semantic-success-light:  #059669;
  --semantic-success-dark:   #10b981;
  --semantic-warning-light:  #d97706;
  --semantic-warning-dark:   #f59e0b;
  --semantic-error-light:    #dc2626;
  --semantic-error-dark:     #ef4444;
  --semantic-info-light:     #2563eb;
  --semantic-info-dark:      #3b82f6;

  /* ============================================================
   * Typography — families
   * ============================================================ */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* ============================================================
   * Typography — marketing scale (light marketing surfaces)
   * ============================================================ */
  --type-h1-marketing: clamp(1.85rem, 4.5vw, 2.6rem);
  --type-h2-marketing: clamp(1.5rem, 3.5vw, 1.95rem);
  --type-h3:           1.4rem;
  --type-h4:           1.1rem;
  --type-lede:         clamp(1.05rem, 1.8vw, 1.15rem);
  --type-body:         1rem;
  --type-small:        0.875rem;
  --type-caption:      0.8rem;
  --type-eyebrow:      0.7rem;
  --type-mono:         0.85rem;

  /* ============================================================
   * Typography — learning scale (dark learning surfaces, tighter)
   * ============================================================ */
  --type-h1-learning:   1.85rem;
  --type-h2-learning:   1.5rem;
  --type-h3-learning:   1.2rem;
  --type-body-learning: 1rem;

  /* ============================================================
   * Spacing scale (4px base)
   * ============================================================ */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ============================================================
   * Spacing — semantic aliases
   * ============================================================ */
  --space-section-marketing: clamp(2.5rem, 5vw, 4rem);
  --space-section-learning:  clamp(1.5rem, 3vw, 2rem);
  --space-component:         var(--space-6);
  --space-element:           var(--space-4);

  /* ============================================================
   * Layout — max widths
   * ============================================================ */
  --width-prose:    640px;
  --width-content:  720px;
  --width-default:  1100px;
  --width-wide:     1280px;

  /* ============================================================
   * Layout — breakpoints
   * ============================================================ */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ============================================================
   * Layout — grid minmax (from about.html prototype)
   * ============================================================ */
  --grid-mission-minmax: 260px;   /* 3-card mission rows */
  --grid-values-minmax:  200px;   /* 4-card value rows */
  --grid-card-gap:       1rem;
  --grid-section-gap:    1.5rem;

  /* ============================================================
   * Border radius
   * ============================================================ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ============================================================
   * Motion
   * ============================================================ */
  --motion-default: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-step:    350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
   * LEGACY ALIASES — to remove during sub-project #6 cascade.
   * Keep consuming code working until cascade rewrites references.
   * Do NOT add new consumers of these aliases — use canonical names.
   * ============================================================ */

  /* BSA legacy (from css/brand.css + about.html inline) */
  --primary-orange:   var(--accent-bitcoin-decorative);
  --color-brand:      var(--accent-bitcoin-decorative);
  --color-accent:     var(--accent-bitcoin-decorative);
  --primary-dark:     #1a1a1a;       /* BSA-specific darker shade — preserve */
  --secondary-dark:   #2d2d2d;       /* BSA-specific lighter shade — preserve */
  --text-light:       #e0e0e0;       /* BSA legacy on-dark text */
  --text-dim:         #b3b3b3;       /* BSA legacy muted text — WCAG 2.1 AA at 4.6:1 */
  --color-bg:         #0b0e14;       /* matches --dm-canvas */
  --color-surface:    #121723;       /* matches --dm-surface */
  --color-border:     #202938;       /* matches --dm-border-subtle */
  --color-chip:       #1b2433;       /* matches --dm-subtle */
  --color-text:       #e6edf3;       /* matches --dm-text-primary */
  --color-muted:      #9aa4b2;       /* matches --dm-text-muted */
  --success-green:    var(--semantic-success-dark);
  --danger-red:       var(--semantic-error-dark);
  --color-success:    var(--semantic-success-dark);
  --color-danger:     var(--semantic-error-dark);
  --color-warning:    var(--semantic-warning-dark);
  --color-info:       var(--semantic-info-dark);
  --gradient-orange:  linear-gradient(135deg, #f7931a 0%, #ffb347 100%);  /* legacy BSA gradient */
  --gradient-brand:   var(--brand-gradient);
  --gradient-surface: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

  /* FSA legacy (from css/fsa-theme.css) */
  --fsa-green:           var(--accent-financial-decorative);
  --fsa-green-light:     #34d399;
  --fsa-green-dark:      var(--semantic-success-light);
  --fsa-green-hover:     #0d9668;
  --fsa-bg-dark:         #0a1f1a;       /* FSA-specific green-tinted dark — preserve */
  --fsa-bg-secondary:    #0f2922;       /* FSA-specific — preserve */
  --fsa-bg-card:         #1a3a2e;       /* FSA-specific — preserve */
  --fsa-bg-hover:        #234a3c;       /* FSA-specific — preserve */
  --fsa-text-primary:    #e0e0e0;
  --fsa-text-secondary:  #9ca3af;
  --fsa-text-accent:     var(--accent-financial-text-on-dark);
  --fsa-text-dim:        #6b7280;
  --fsa-success:         var(--semantic-success-dark);
  --fsa-warning:         var(--semantic-warning-dark);
  --fsa-error:           var(--semantic-error-dark);
  --fsa-info:            var(--semantic-info-dark);
  --fsa-border-subtle:   rgba(16, 185, 129, 0.1);
  --fsa-border-medium:   rgba(16, 185, 129, 0.3);
  --fsa-border-strong:   rgba(16, 185, 129, 0.6);
  --fsa-gradient-primary: linear-gradient(135deg, var(--accent-financial-decorative), #34d399);
  --fsa-gradient-bg:      linear-gradient(135deg, #0a1f1a 0%, #0f2922 100%);
  --fsa-gradient-card:    linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
}