/* ==============================================================================
   maindset.ACADEMY — Design System Tokens (Default Theme)

   SPEC-0041: All UI surfaces (sidebar, landing, dashboard, pages) MUST use
   these tokens. No hardcoded hex values in templates or component CSS.

   THEME CONTRACT: These variables define the visual identity.
   Customer designers override them via theme-custom.css (loaded after this file).

   Structure:
     --ma-*         Global tokens (used everywhere)
     --ma-dark-*    Dark surface tokens (sidebar, landing hero)
     --ma-light-*   Light surface tokens (dashboard, pages, forms)
   ============================================================================== */

:root {
    /* ===== BRAND ===== */
    --ma-brand-name: "maindset.ACADEMY";
    --ma-font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ma-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ===== ACCENT PALETTE (unified across all surfaces) ===== */
    --ma-accent: #7c6aff;                              /* Primary action */
    --ma-accent-hover: #6b5ce7;                         /* Primary hover */
    --ma-accent-light: rgba(124, 106, 255, 0.08);       /* Tinted backgrounds */
    --ma-accent-border: rgba(124, 106, 255, 0.20);      /* Accent borders */

    --ma-accent-warm: #e8734a;                          /* Secondary action / mic / CTA */
    --ma-accent-warm-hover: #d4632e;
    --ma-accent-warm-light: rgba(232, 115, 74, 0.10);

    --ma-accent-cyan: #4ecdc4;                          /* Success / active / trust */
    --ma-accent-cyan-light: rgba(78, 205, 196, 0.10);

    --ma-accent-gold: #d4a843;                          /* Warning / highlight */
    --ma-accent-gold-light: rgba(212, 168, 67, 0.10);

    --ma-accent-green: #3daa8c;                         /* Health / verified */
    --ma-accent-green-light: rgba(61, 170, 140, 0.10);

    --ma-danger: #e55353;                               /* Destructive actions */
    --ma-danger-light: rgba(229, 83, 83, 0.10);

    /* ===== RADIUS SCALE ===== */
    --ma-radius-xs: 4px;
    --ma-radius-sm: 8px;
    --ma-radius-md: 12px;
    --ma-radius-lg: 16px;
    --ma-radius-xl: 20px;
    --ma-radius-pill: 100px;
    --ma-radius-circle: 50%;

    /* ===== SHADOW SCALE ===== */
    --ma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ma-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --ma-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --ma-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
    --ma-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --ma-shadow-glow: 0 0 40px rgba(124, 106, 255, 0.15);

    /* ===== SPACING SCALE ===== */
    --ma-space-1: 4px;
    --ma-space-2: 8px;
    --ma-space-3: 12px;
    --ma-space-4: 16px;
    --ma-space-5: 20px;
    --ma-space-6: 24px;
    --ma-space-8: 32px;
    --ma-space-10: 40px;
    --ma-space-12: 48px;
    --ma-space-16: 64px;

    /* ===== TRANSITION ===== */
    --ma-transition-fast: 0.15s ease;
    --ma-transition: 0.25s ease;
    --ma-transition-slow: 0.4s ease;

    /* ================================================================
       DARK SURFACE (sidebar, landing page hero, modals on dark bg)
       ================================================================ */
    --ma-dark-bg: #06060e;
    --ma-dark-surface: #0d0d1a;
    --ma-dark-surface-2: #13132a;
    --ma-dark-border: rgba(124, 106, 255, 0.12);
    --ma-dark-text: #e8e6f0;
    --ma-dark-text-secondary: #a8a4b8;
    --ma-dark-text-muted: #6b6889;

    /* ================================================================
       LIGHT SURFACE (dashboard, forms, settings, all authenticated pages)
       ================================================================ */
    --ma-light-bg: #f5f3ee;
    --ma-light-surface: #ffffff;
    --ma-light-surface-warm: #faf7f1;
    --ma-light-border: rgba(160, 150, 130, 0.20);
    --ma-light-border-strong: rgba(140, 130, 110, 0.32);
    --ma-light-text: #2a2926;
    --ma-light-text-secondary: #55524c;
    --ma-light-text-muted: #918a80;

    /* ================================================================
       COMPONENT TOKENS (derived — reference global tokens above)
       ================================================================ */

    /* Buttons */
    --ma-btn-primary-bg: var(--ma-accent);
    --ma-btn-primary-hover: var(--ma-accent-hover);
    --ma-btn-primary-text: #ffffff;
    --ma-btn-primary-shadow: 0 4px 16px rgba(124, 106, 255, 0.25);
    --ma-btn-primary-radius: var(--ma-radius-md);

    --ma-btn-secondary-bg: transparent;
    --ma-btn-secondary-border: var(--ma-accent-border);
    --ma-btn-secondary-text: var(--ma-accent);
    --ma-btn-secondary-radius: var(--ma-radius-md);

    --ma-btn-warm-bg: var(--ma-accent-warm);
    --ma-btn-warm-hover: var(--ma-accent-warm-hover);
    --ma-btn-warm-text: #ffffff;
    --ma-btn-warm-shadow: 0 2px 8px rgba(232, 115, 74, 0.3);

    /* Cards */
    --ma-card-radius: var(--ma-radius-lg);
    --ma-card-shadow: var(--ma-shadow-sm);
    --ma-card-hover-shadow: var(--ma-shadow-md);

    /* Input fields */
    --ma-input-radius: var(--ma-radius-md);
    --ma-input-border: var(--ma-light-border-strong);
    --ma-input-focus-border: var(--ma-accent);
    --ma-input-focus-ring: 0 0 0 3px var(--ma-accent-light);
}

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

/* ===== GLOBAL RESETS ===== */
* { font-family: var(--ma-font-primary); }