/* ============================================================
 * 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
 *
 * Bitcoin Sovereign Academy update 2026-05
 * BSA visual system: deep black base, electric orange, bright yellow fade,
 * clean white text, and sharp diagram accents.
 *
 * The orange to yellow fade is the signature.
 * Flat orange is the daily workhorse.
 * Flat yellow is the attention signal.
 *
 * Champagne brass, muted gold, and beige cream have been removed from BSA.
 * ============================================================ */

/* Typography baseline */
html {
  font-size: 13px;
}

:root {
  /* ============================================================
   * Light marketing palette
   * Clean neutral light surfaces, not beige.
   * ============================================================ */

  --lm-canvas:          #F7F7F2;
  --lm-surface:         #FFFFFF;
  --lm-subtle:          #EDEDE8;
  --lm-border-subtle:   #DADAD2;
  --lm-border-strong:   #B8B8B0;
  --lm-text-primary:    #16181C;
  --lm-text-secondary:  #2D2F35;
  --lm-text-muted:      #64645F;
  --lm-text-faint:      #9A9A92;

  /* ============================================================
   * Dark learning palette
   * BSA black first learning environment.
   * ============================================================ */

  --dm-canvas:          #16181C;
  --dm-surface:         #1F2024;
  --dm-subtle:          #272930;
  --dm-border-subtle:   #2D2F35;
  --dm-border-strong:   #3A3D45;
  --dm-text-primary:    #F7F7F2;
  --dm-text-secondary:  #EDEDE8;
  --dm-text-muted:      #B8B8B0;
  --dm-text-faint:      #64645F;

  /* ============================================================
   * Accents — Bitcoin Sovereign Academy
   * Electric orange and bright yellow system.
   * ============================================================ */

  --accent-bitcoin-decorative:    #FF7A00;
  --accent-bitcoin-hover:         #FF8A00;
  --accent-bitcoin-hot:           #FF9A00;
  --accent-bitcoin-deep:          #E85F00;
  --accent-bitcoin-yellow:        #FFD400;
  --accent-bitcoin-yellow-bright: #FFE600;

  --accent-bitcoin-text-on-light: #E85F00;
  --accent-bitcoin-text-on-dark:  #FF8A00;

  /* ============================================================
   * Accents — Financially Sovereign Academy
   * Preserved emerald system for FSA only.
   * ============================================================ */

  --accent-financial-decorative:    #0D9668;
  --accent-financial-text-on-light: #047857;
  --accent-financial-text-on-dark:  #6EE7B7;

  /* ============================================================
   * Gradients
   * BSA gradients are permitted only for headline text, key takeaway bars,
   * icon strokes/fills, and rare hero emphasis.
   * Avoid gradients on body text and full page backgrounds.
   * ============================================================ */

  /* The signature: orange -> yellow, 135deg, one smooth mid-stop.
     Canonicalized 2026-06-19 (was 90deg yellow->orange). Direction matches
     the brand intent "bright orange to bright yellow fade" and the dominant
     site usage. Use this for headline/numeric text, key bars, icon fills. */
  --brand-gradient: linear-gradient(
    135deg,
    #FF7A00 0%,
    #FF9A00 45%,
    #FFD400 100%
  );

  /* Horizontal variant for full-width bars / underlines where 135deg looks wrong. */
  --brand-gradient-h: linear-gradient(
    90deg,
    #FF7A00 0%,
    #FF9A00 45%,
    #FFD400 100%
  );

  /* Now redundant — kept as aliases so existing consumers collapse onto the signature. */
  --brand-gradient-angled: var(--brand-gradient);
  --brand-gradient-key-takeaway: var(--brand-gradient-h);

  --brand-gradient-financial: linear-gradient(
    135deg,
    #0D9668 0%,
    #6EE7B7 100%
  );

  /* ============================================================
   * Semantic alerts
   * ============================================================ */

  --semantic-success-light:  #1A7A5E;
  --semantic-success-dark:   #8CC63F;

  --semantic-warning-light:  #E85F00;
  --semantic-warning-dark:   #FFD400;

  --semantic-error-light:    #DC2626;
  --semantic-error-dark:     #FF2B2B;

  --semantic-info-light:     #2563EB;
  --semantic-info-dark:      #2F75FF;

  /* ============================================================
   * 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
   * ============================================================ */

  --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
   * ============================================================ */

  --type-h1-learning:   1.85rem;
  --type-h2-learning:   1.5rem;
  --type-h3-learning:   1.2rem;
  --type-body-learning: 1rem;

  /* ============================================================
   * Spacing scale
   * ============================================================ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ============================================================
   * 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
   * ============================================================ */

  --grid-mission-minmax: 260px;
  --grid-values-minmax:  200px;
  --grid-card-gap:       1rem;
  --grid-section-gap:    1.5rem;

  /* ============================================================
   * Border radius
   * Flat 2px corners (was rounded 4/6/12px). Aligns the canonical token
   * with the flattened brand direction already in use downstream.
   * ============================================================ */

  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-button: 2px;
  --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);

  /* ============================================================
   * BSA CANONICAL TOKENS
   * Use these for new Bitcoin Sovereign Academy work.
   * ============================================================ */

  --color-brand:         #FF7A00;
  --color-accent:        #FF8A00;
  --color-orange:        #FF7A00;
  --color-orange-bright: #FF8A00;
  --color-orange-hot:    #FF9A00;
  --color-orange-deep:   #E85F00;

  --color-yellow:        #FFD400;
  --color-yellow-bright: #FFE600;
  --color-yellow-soft:   #FFC400;

  --color-bg:            var(--dm-canvas);
  --color-surface:       var(--dm-surface);
  --color-surface-deepest: var(--dm-subtle);
  --color-border:        var(--dm-border-subtle);
  --color-chip:          var(--dm-subtle);

  --color-black:         #000000;
  --color-black-soft:    #050505;
  --color-panel:         #0B0B0B;
  --color-panel-soft:    #101010;

  --color-text:          var(--dm-text-primary);
  --color-text-strong:   #FFFFFF;
  --color-muted:         var(--dm-text-muted);
  --text-dim:            var(--dm-text-muted);

  --color-cream:         var(--lm-canvas);
  --color-cream-2:       var(--lm-subtle);
  --color-cream-3:       var(--lm-border-subtle);
  --color-cream-wash:    rgba(247, 247, 242, 0.04);
  --color-ink-on-cream:  #16181C;
  --color-muted-on-cream: #64645F;

  --color-success:       var(--semantic-success-dark);
  --color-danger:        var(--semantic-error-dark);
  --color-danger-soft:   var(--accent-bitcoin-deep);
  --color-warning:       var(--semantic-warning-dark);
  --color-info:          var(--semantic-info-dark);

  --color-node-green:    var(--semantic-success-dark);
  --color-node-red:      var(--semantic-error-dark);
  --color-node-blue:     var(--semantic-info-dark);

  --color-line-orange:   rgba(255, 122, 0, 0.72);
  --color-line-yellow:   rgba(255, 212, 0, 0.72);

  --glow-orange:         0 0 22px rgba(255, 122, 0, 0.45);
  --glow-yellow:         0 0 28px rgba(255, 212, 0, 0.42);
  --glow-red:            0 0 22px rgba(255, 43, 43, 0.38);

  --gradient-brand:      var(--brand-gradient);
  --gradient-orange:     var(--brand-gradient);
  --gradient-key-takeaway: var(--brand-gradient-key-takeaway);
  --gradient-surface:    linear-gradient(135deg, #1F2024 0%, #272930 100%);

  /* ============================================================
   * LEGACY ALIASES
   * Keep old code working while removing old brass and beige usage.
   * Do not add new consumers of these aliases.
   * ============================================================ */

  --primary-orange:   var(--color-brand);
  --primary-dark:     #1A1A1A;
  --secondary-dark:   #2D2D2D;
  --text-light:       var(--color-text);
  --success-green:    var(--color-success);
  --danger-red:       var(--color-danger);

  /* Old gold names are now compatibility aliases only */
  --color-gold:        var(--color-yellow);
  --color-gold-light:  var(--color-yellow-bright);
  --color-gold-pale:   #FFF2A3;
  --color-orange-burnt: var(--color-orange-deep);

  /* ============================================================
   * FSA legacy
   * Preserved for financially-sovereign-academy.
   * ============================================================ */

  --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-bg-secondary:    #0F2922;
  --fsa-bg-card:         #1A3A2E;
  --fsa-bg-hover:        #234A3C;

  --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)
  );
}