/**
 * IB Math Master — Design Tokens
 * 
 * RULES:
 * - Astra owns body typography, heading sizes, link colors, primary buttons, container width
 * - These tokens are for IB custom components only (ib-* classes)
 * - No bare element selectors — everything is class-scoped
 */

:root {
    /* ===========================
       COLORS — Core Palette
       =========================== */
    --ib-navy:           #0f2a5c;
    --ib-navy-light:     #1a3a6e;
    --ib-navy-medium:    #162d52;
    --ib-navy-darker:    #0b2250;
    --ib-navy-dark:      #162f5e;

    --ib-accent:         #38bdf8;
    --ib-accent-hover:   #0ea5e9;
    --ib-accent-soft:    #bae6fd;
    --ib-accent-softer:  #e0f2fe;
    --ib-accent-bg:      #f0f9ff;

    --ib-white:          #ffffff;
    --ib-off-white:      #fafbfc;
    --ib-light:          #f8fafc;
    --ib-cream:          #fdfcfa;
    --ib-warm:           #faf8f5;

    --ib-text:           #1a1a2e;
    --ib-text-secondary: #334155;
    --ib-text-muted:     #64748b;
    --ib-border:         #e2e8f0;

    /* ===========================
       COLORS — Semantic
       =========================== */
    --ib-star-color:     #fbbf24;
    --ib-course-ai-hl:   #6366f1;
    --ib-course-ai-sl:   #10b981;

    /* ===========================
       COLORS — Topic Colors (Syllabus Pages)
       =========================== */
    --topic-1:        #0284c7;
    --topic-1-bg:     #f0f9ff;
    --topic-1-border: #38bdf8;
    --topic-1-chip:   #e0f2fe;

    --topic-2:        #047857;
    --topic-2-bg:     #f0fdf4;
    --topic-2-border: #6ee7b7;
    --topic-2-chip:   #d1fae5;

    --topic-3:        #ea580c;
    --topic-3-bg:     #fff7ed;
    --topic-3-border: #fb923c;
    --topic-3-chip:   #ffedd5;

    --topic-4:        #db2777;
    --topic-4-bg:     #fdf2f8;
    --topic-4-border: #f472b6;
    --topic-4-chip:   #fce7f3;

    --topic-5:        #7c3aed;
    --topic-5-bg:     #f5f3ff;
    --topic-5-border: #a78bfa;
    --topic-5-chip:   #ede9fe;

    /* ===========================
       SHADOWS
       =========================== */
    --ib-shadow-xs:  0 1px 4px rgba(15, 42, 92, 0.05);
    --ib-shadow-sm:  0 2px 8px rgba(15, 42, 92, 0.06);
    --ib-shadow-md:  0 4px 16px rgba(15, 42, 92, 0.08);
    --ib-shadow-lg:  0 12px 32px rgba(15, 42, 92, 0.12);
    --ib-shadow-xl:  0 24px 48px rgba(15, 42, 92, 0.14);

    --ib-shadow-btn:          0 4px 20px rgba(15, 42, 92, 0.2);
    --ib-shadow-btn-hover:    0 8px 30px rgba(15, 42, 92, 0.25);
    --ib-shadow-btn-white:    0 4px 20px rgba(0, 0, 0, 0.15);
    --ib-shadow-btn-wh-hover: 0 8px 30px rgba(0, 0, 0, 0.2);
    --ib-shadow-hero-card:    0 16px 48px rgba(15, 42, 92, 0.12);
    --ib-shadow-play:         0 6px 24px rgba(0, 0, 0, 0.15);

    /* ===========================
       SPACING — Section Padding
       =========================== */
    --ib-section-pad:        80px;
    --ib-section-pad-hero:   100px 0 120px;
    --ib-section-pad-cta:    100px 0 120px;
    --ib-section-pad-accent: 100px;
    --ib-section-pad-mobile: 72px 0 88px;

    /* ===========================
       SPACING — Component Scale
       =========================== */
    --ib-space-2:   2px;
    --ib-space-4:   4px;
    --ib-space-6:   6px;
    --ib-space-8:   8px;
    --ib-space-10:  10px;
    --ib-space-12:  12px;
    --ib-space-14:  14px;
    --ib-space-16:  16px;
    --ib-space-20:  20px;
    --ib-space-24:  24px;
    --ib-space-28:  28px;
    --ib-space-32:  32px;
    --ib-space-36:  36px;
    --ib-space-40:  40px;
    --ib-space-48:  48px;
    --ib-space-56:  56px;
    --ib-space-64:  64px;

    /* ===========================
       BORDER RADIUS — Tiers
       =========================== */
    --ib-radius-pill:   50px;
    --ib-radius-circle: 50%;
    --ib-radius-xl:     24px;
    --ib-radius-lg:     20px;
    --ib-radius-md:     16px;
    --ib-radius-sm:     12px;
    --ib-radius-xs:     8px;

    /* ===========================
       TYPOGRAPHY — Component-level
       (Astra owns H1-H6 base sizes;
        these are for component overrides)
       =========================== */
    --ib-font-size-xs:    12px;
    --ib-font-size-sm:    13px;
    --ib-font-size-base:  15px;
    --ib-font-size-md:    16px;
    --ib-font-size-body:  17px;
    --ib-font-size-lg:    18px;
    --ib-font-size-xl:    20px;
    --ib-font-size-2xl:   22px;
    --ib-font-size-3xl:   24px;

    /* ===========================
       LAYOUT
       =========================== */
    --ib-container-max:    1200px;
    --ib-container-pad:    24px;
    --ib-content-narrow:   680px;
    --ib-content-medium:   800px;
    --ib-content-wide:     960px;
    --ib-hero-sidebar:     380px;
    --ib-faq-sidebar:      320px;

    /* ===========================
       TRANSITIONS
       =========================== */
    --ib-transition:       0.3s ease;
    --ib-transition-fast:  0.2s ease;
}