/**
 * ==============================================================================
 * MED HUB WEB PORTAL — MULTI-BRAND DESIGN SYSTEM TOKENS (css/tokens.css)
 * ==============================================================================
 * 
 * Aesthetic Theses:
 * 1. AZ Learn: "Operations Studio"
 *    - Warm Obsidian & Bone Paper text hierarchy.
 *    - Radiant Primary Accent (#EA580C).
 * 2. All In One: "Midnight Space & Electric Sapphire"
 *    - Velvet Midnight Space layered surfaces (#070C1A, #0B1226, #111C38).
 *    - Electric Sapphire interactive accent (#0284C7, #38BDF8).
 * 
 * Core Architectural Standards:
 * - Self-Hosted Local Inter Typography (Rule 2 / Zero CDNs).
 * - 100% Backward Compatibility: Maps all legacy variables (--bg-base, --brand-primary, etc.)
 *   directly to semantic tokens so existing scripts render cleanly with zero regressions.
 * ==============================================================================
 */

/* --- Self-Hosted Local Inter Font Face (Zero CDNs) --- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

/* ==============================================================================
   1. DEFAULT THEME / AZ LEARN — WARM OBSIDIAN DARK MODE
   ============================================================================== */
:root,
[data-theme="dark"],
[data-brand="azlearn"],
[data-brand="azlearn"][data-theme="dark"] {
    /* --- Canvas Ground & Layered Surfaces --- */
    --ground:              #12100E;  /* Deep warm obsidian canvas */
    --surface-1:           #1A1714;  /* Base card, stage panels, headers */
    --surface-2:           #24201C;  /* Elevated cards, table rows, list items */
    --surface-3:           #302B26;  /* Active items, hover wells, inputs */
    --surface-4:           #3D3630;  /* Popovers, modals, dropdown menus */

    /* --- Ink & Typography --- */
    --ink:                 #F4EFE6;  /* High-contrast bone paper primary text */
    --ink-2:               #C8C0B4;  /* Warm stone secondary reading text */
    --ink-3:               #A89F90;  /* Muted metadata, captions, placeholders */

    /* --- Hairline Structural Borders --- */
    --hairline:            rgba(244, 239, 230, 0.09);  /* Default subtle divider */
    --hairline-2:          rgba(244, 239, 230, 0.16);  /* Card borders, table grid */
    --hairline-3:          rgba(244, 239, 230, 0.26);  /* Hover & focused borders */

    /* --- Brand Accent — Radiant Orange --- */
    --foil:                #EA580C;  /* Primary interactive brand accent */
    --foil-hover:          #C2410C;  /* Interactive hover state */
    --foil-dim:            rgba(234, 88, 12, 0.14);  /* Subtle active background wash */
    --foil-bright:         #FB923C;  /* High-visibility active indicator */

    /* --- Semantic Accents --- */
    --success:             #3D8B6E;  /* Green for verified, active, passing */
    --success-bg:          rgba(61, 139, 110, 0.14);
    --success-border:      rgba(61, 139, 110, 0.32);

    --warn:                #D97706;  /* Amber for warning, pending, admin badge */
    --warn-bg:             rgba(217, 119, 6, 0.14);
    --warn-border:         rgba(217, 119, 6, 0.32);

    --error:               #C45C4A;  /* Wine red for danger, revoked, errors */
    --error-bg:            rgba(196, 92, 74, 0.14);
    --error-border:        rgba(196, 92, 74, 0.32);

    --tutor-purple:        #A855F7;  /* Warm violet for tutor badges */
    --tutor-purple-bg:     rgba(168, 85, 247, 0.14);
    --tutor-purple-border: rgba(168, 85, 247, 0.32);

    /* --- Typography Families --- */
    --font-sans:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:           ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* --- Metrics & Radii --- */
    --radius-sm:           6px;
    --radius-md:           10px;
    --radius-lg:           14px;
    --radius-xl:           20px;
    --radius-full:         9999px;

    /* --- Shadows --- */
    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md:           0 4px 14px rgba(0, 0, 0, 0.36);
    --shadow-lg:           0 12px 36px rgba(0, 0, 0, 0.48);
    --shadow-card:         0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-elevated:     0 10px 30px rgba(0, 0, 0, 0.55);

    /* ==========================================================================
       BACKWARD COMPATIBILITY ALIAS BRIDGES
       ========================================================================== */
    --bg-base:             var(--ground);
    --bg-surface:          var(--surface-1);
    --bg-surface-elevated: var(--surface-2);
    --bg-surface-subtle:   var(--surface-3);
    --border-subtle:       var(--hairline);
    --border-strong:       var(--hairline-2);
    --border-accent:       rgba(234, 88, 12, 0.35);
    --brand-primary:       var(--foil);
    --brand-primary-hover: var(--foil-hover);
    --brand-accent:        var(--foil-bright);
    --brand-glow:          rgba(234, 88, 12, 0.2);

    --admin-gold:          var(--warn);
    --admin-gold-bg:       var(--warn-bg);
    --admin-gold-border:   var(--warn-border);

    --success-green:       var(--success);
    --success-green-bg:    var(--success-bg);
    --danger-red:          var(--error);
    --danger-red-bg:       var(--error-bg);

    --text-primary:        var(--ink);
    --text-secondary:      var(--ink-2);
    --text-muted:          var(--ink-3);
}

/* ==============================================================================
   2. AZ LEARN — PARCHMENT LIGHT MODE
   ============================================================================== */
[data-theme="light"],
[data-brand="azlearn"][data-theme="light"] {
    --ground:              #F3EEE4;
    --surface-1:           #FCFAF6;
    --surface-2:           #E8E1D4;
    --surface-3:           #DDD5C6;
    --surface-4:           #C8BFB0;

    --ink:                 #1A1714;
    --ink-2:               #4A443C;
    --ink-3:               #6B6458;

    --hairline:            rgba(26, 23, 20, 0.08);
    --hairline-2:          rgba(26, 23, 20, 0.14);
    --hairline-3:          rgba(26, 23, 20, 0.24);

    --foil:                #C2410C;
    --foil-hover:          #9A3412;
    --foil-dim:            rgba(194, 65, 12, 0.12);
    --foil-bright:         #EA580C;

    --success:             #2F745B;
    --success-bg:          rgba(47, 116, 91, 0.12);
    --success-border:      rgba(47, 116, 91, 0.25);

    --warn:                #B45309;
    --warn-bg:             rgba(180, 83, 9, 0.12);
    --warn-border:         rgba(180, 83, 9, 0.25);

    --error:               #B34735;
    --error-bg:            rgba(179, 71, 53, 0.12);
    --error-border:        rgba(179, 71, 53, 0.25);

    --shadow-sm:           0 1px 2px rgba(26, 23, 20, 0.06);
    --shadow-md:           0 4px 12px rgba(26, 23, 20, 0.08);
    --shadow-lg:           0 12px 32px rgba(26, 23, 20, 0.12);
    --shadow-card:         0 4px 16px rgba(26, 23, 20, 0.08);
    --shadow-elevated:     0 10px 24px rgba(26, 23, 20, 0.12);

    --bg-base:             var(--ground);
    --bg-surface:          var(--surface-1);
    --bg-surface-elevated: var(--surface-2);
    --bg-surface-subtle:   var(--surface-3);
    --border-subtle:       var(--hairline);
    --border-strong:       var(--hairline-2);
    --border-accent:       rgba(194, 65, 12, 0.35);
    --brand-primary:       var(--foil);
    --brand-primary-hover: var(--foil-hover);
    --brand-accent:        var(--foil-bright);
    --brand-glow:          rgba(194, 65, 12, 0.15);

    --text-primary:        var(--ink);
    --text-secondary:      var(--ink-2);
    --text-muted:          var(--ink-3);
}

/* ==============================================================================
   3. ALL IN ONE (AIO) — MIDNIGHT SPACE & ELECTRIC SAPPHIRE (DARK)
   ============================================================================== */
[data-brand="allinone"],
[data-brand="allinone"][data-theme="dark"] {
    /* --- Canvas Ground & Layered Surfaces --- */
    --ground:              #070C1A;  /* Midnight Space deep canvas */
    --surface-1:           #0B1226;  /* Base card, stage panels, headers */
    --surface-2:           #111C38;  /* Elevated cards, table rows, list items */
    --surface-3:           #18264D;  /* Active items, hover wells, inputs */
    --surface-4:           #1F3266;  /* Popovers, modals, dropdown menus */

    /* --- Ink & Typography --- */
    --ink:                 #F0F6FC;  /* High-contrast celestial white */
    --ink-2:               #C8D8ED;  /* Soft celestial secondary text */
    --ink-3:               #8DA4C4;  /* Muted metadata, captions, placeholders */

    /* --- Hairline Structural Borders --- */
    --hairline:            rgba(240, 246, 252, 0.08);
    --hairline-2:          rgba(240, 246, 252, 0.15);
    --hairline-3:          rgba(56, 189, 248, 0.28);

    /* --- Brand Accent — Electric Sapphire & Deep Sky --- */
    --foil:                #0284C7;  /* Deep Electric Sapphire */
    --foil-hover:          #0369A1;  /* Rich Ocean Sapphire hover */
    --foil-dim:            rgba(2, 132, 199, 0.14);
    --foil-bright:         #38BDF8;  /* Vivid Sky Blue active indicator */

    /* --- Semantic Accents --- */
    --success:             #10B981;
    --success-bg:          rgba(16, 185, 129, 0.14);
    --success-border:      rgba(16, 185, 129, 0.32);

    --warn:                #EAB308;
    --warn-bg:             rgba(234, 179, 8, 0.14);
    --warn-border:         rgba(234, 179, 8, 0.32);

    --error:               #EF4444;
    --error-bg:            rgba(239, 68, 68, 0.14);
    --error-border:        rgba(239, 68, 68, 0.32);

    --tutor-purple:        #818CF8;
    --tutor-purple-bg:     rgba(129, 140, 248, 0.14);
    --tutor-purple-border: rgba(129, 140, 248, 0.32);

    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:           0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg:           0 12px 36px rgba(0, 0, 0, 0.6);
    --shadow-card:         0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-elevated:     0 10px 30px rgba(0, 0, 0, 0.65);

    --bg-base:             var(--ground);
    --bg-surface:          var(--surface-1);
    --bg-surface-elevated: var(--surface-2);
    --bg-surface-subtle:   var(--surface-3);
    --border-subtle:       var(--hairline);
    --border-strong:       var(--hairline-2);
    --border-accent:       rgba(2, 132, 199, 0.35);
    --brand-primary:       var(--foil);
    --brand-primary-hover: var(--foil-hover);
    --brand-accent:        var(--foil-bright);
    --brand-glow:          rgba(2, 132, 199, 0.25);

    --admin-gold:          var(--warn);
    --admin-gold-bg:       var(--warn-bg);
    --admin-gold-border:   var(--warn-border);

    --success-green:       var(--success);
    --success-green-bg:    var(--success-bg);
    --danger-red:          var(--error);
    --danger-red-bg:       var(--error-bg);

    --text-primary:        var(--ink);
    --text-secondary:      var(--ink-2);
    --text-muted:          var(--ink-3);
}

/* ==============================================================================
   4. ALL IN ONE (AIO) — CLEAN GLACIER LIGHT MODE
   ============================================================================== */
[data-brand="allinone"][data-theme="light"] {
    --ground:              #F0F4F8;
    --surface-1:           #FFFFFF;
    --surface-2:           #E1E8F0;
    --surface-3:           #CBD5E1;
    --surface-4:           #94A3B8;

    --ink:                 #0F172A;
    --ink-2:               #334155;
    --ink-3:               #64748B;

    --hairline:            rgba(15, 23, 42, 0.08);
    --hairline-2:          rgba(15, 23, 42, 0.15);
    --hairline-3:          rgba(2, 132, 199, 0.28);

    --foil:                #0284C7;
    --foil-hover:          #0369A1;
    --foil-dim:            rgba(2, 132, 199, 0.12);
    --foil-bright:         #004F9E;

    --success:             #059669;
    --success-bg:          rgba(5, 150, 105, 0.12);
    --success-border:      rgba(5, 150, 105, 0.25);

    --warn:                #CA8A04;
    --warn-bg:             rgba(202, 138, 4, 0.12);
    --warn-border:         rgba(202, 138, 4, 0.25);

    --error:               #DC2626;
    --error-bg:            rgba(220, 38, 38, 0.12);
    --error-border:        rgba(220, 38, 38, 0.25);

    --shadow-sm:           0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md:           0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg:           0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-card:         0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-elevated:     0 10px 24px rgba(15, 23, 42, 0.12);

    --bg-base:             var(--ground);
    --bg-surface:          var(--surface-1);
    --bg-surface-elevated: var(--surface-2);
    --bg-surface-subtle:   var(--surface-3);
    --border-subtle:       var(--hairline);
    --border-strong:       var(--hairline-2);
    --border-accent:       rgba(2, 132, 199, 0.35);
    --brand-primary:       var(--foil);
    --brand-primary-hover: var(--foil-hover);
    --brand-accent:        var(--foil-bright);
    --brand-glow:          rgba(2, 132, 199, 0.15);

    --text-primary:        var(--ink);
    --text-secondary:      var(--ink-2);
    --text-muted:          var(--ink-3);
}