/**
 * TeacherAI Platform Colors - Centralized Theme System
 * Location: /wp-content/plugins/teacherai-simple/assets/css/platform-colors.css
 * 
 * SINGLE SOURCE OF TRUTH for all platform colors!
 * Change a color here = updates everywhere automatically.
 * 
 * THE TEACHERAI PASTEL PALETTE 🩷💚💜🩵
 * - Dashboard: Sky Blue ☀️ (home, calm, welcome)
 * - Library: Peach 🍑 (warm, cozy, your collection)
 * - Supply Closet: Lime 🎾 (fresh, spring, materials alive)
 * - Builder/Results: Lavender 💜 (magic, creation, AI wonder)
 * 
 * THE ANTI-CONDIMENT RULE 🍅❌
 * Library is PEACH, not TOMATO!
 * 
 * Created by: Claude 150 (Architecture)
 * Date: November 28, 2025
 * 
 * TEAM TEACHAI FOREVER! 💜
 */

/* ================================================
   CSS CUSTOM PROPERTIES (Variables)
   ================================================ */
:root {
    /* ----------------------------------------
       DASHBOARD - Sky Blue ☀️
       "Welcome home, teacher"
       ---------------------------------------- */
    --dashboard-lightest: #f0f9ff;      /* sky-50 */
    --dashboard-light: #e0f2fe;         /* sky-100 */
    --dashboard-border: #7dd3fc;        /* sky-300 */
    --dashboard-accent: #38bdf8;        /* sky-400 */
    --dashboard-base: #0ea5e9;          /* sky-500 */
    --dashboard-dark: #0284c7;          /* sky-600 */
    --dashboard-text: #0369a1;          /* sky-700 */
    --dashboard-text-dark: #075985;     /* sky-800 */
    
    /* ----------------------------------------
       LIBRARY - Peach/Coral 🍑🩷
       "Your warm collection"
       NOT TOMATO! 🍅❌
       ---------------------------------------- */
    --library-lightest: #fff8f5;        /* custom peachy cream */
    --library-light: #fff5f2;           /* custom peach */
    --library-medium: #ffe4de;          /* custom coral light */
    --library-border: #f0b8a8;          /* custom salmon */
    --library-accent: #e8998d;          /* custom coral */
    --library-base: #d4857a;            /* custom coral dark */
    --library-text: #c48b7a;            /* custom warm brown */
    --library-text-dark: #8b5a5a;       /* custom rosy brown */
    
    /* ----------------------------------------
       SUPPLY CLOSET - Lime 🎾
       "Fresh spring materials"
       Yellow-green, NOT teal!
       ---------------------------------------- */
    --supply-lightest: #f7fee7;         /* lime-50 */
    --supply-light: #ecfccb;            /* lime-100 */
    --supply-medium: #d9f99d;           /* lime-200 */
    --supply-border: #bef264;           /* lime-300 */
    --supply-accent: #a3e635;           /* lime-400 */
    --supply-base: #84cc16;             /* lime-500 */
    --supply-dark: #65a30d;             /* lime-600 */
    --supply-text: #4d7c0f;             /* lime-700 */
    --supply-text-dark: #365314;        /* lime-800 */
    
    /* ----------------------------------------
       BUILDER & RESULTS - Lavender 💜
       "Where magic happens"
       ---------------------------------------- */
    --builder-lightest: #faf5ff;        /* purple-50 */
    --builder-light: #f3e8ff;           /* purple-100 */
    --builder-medium: #e9d5ff;          /* purple-200 */
    --builder-border: #d8b4fe;          /* purple-300 */
    --builder-accent: #c084fc;          /* purple-400 */
    --builder-base: #a855f7;            /* purple-500 */
    --builder-dark: #9333ea;            /* purple-600 */
    --builder-text: #7e22ce;            /* purple-700 */
    --builder-text-dark: #581c87;       /* purple-900 */
    
    /* ----------------------------------------
       SHARED / NEUTRAL
       ---------------------------------------- */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Danger/Logout */
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --danger-hover: #fee2e2;
    
    /* Premium/Upgrade */
    --premium-light: #fef9c3;
    --premium-base: #f59e0b;
    --premium-dark: #d97706;
    --premium-text: #854d0e;
    
    /* Fusion (stays purple - it's special!) */
    --fusion-start: #8b5cf6;
    --fusion-end: #6366f1;
}

/* ================================================
   HERO BANNERS
   Each page gets its themed hero
   ================================================ */

/* Dashboard Hero ☀️ */
.hero-dashboard {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--dashboard-lightest) 0%, var(--dashboard-light) 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--dashboard-border);
}
.hero-dashboard h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dashboard-text);
    margin: 0 0 0.5rem 0;
}
.hero-dashboard p {
    font-size: 1rem;
    color: var(--dashboard-dark);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Library Hero 🍑 */
.hero-library {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--library-light) 0%, var(--library-medium) 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--library-border);
}
.hero-library h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--library-text-dark);
    margin: 0 0 0.5rem 0;
}
.hero-library p {
    font-size: 1rem;
    color: var(--library-text);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Supply Closet Hero 🎾 */
.hero-supply {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--supply-lightest) 0%, var(--supply-medium) 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--supply-accent);
}
.hero-supply h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--supply-text-dark);
    margin: 0 0 0.5rem 0;
}
.hero-supply p {
    font-size: 1rem;
    color: var(--supply-text);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Builder/Results Hero 💜 */
.hero-builder {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--builder-lightest) 0%, var(--builder-light) 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--builder-border);
}
.hero-builder h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--builder-text-dark);
    margin: 0 0 0.5rem 0;
}
.hero-builder p {
    font-size: 1rem;
    color: var(--builder-text);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero icon (shared) */
.hero-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

/* ================================================
   ACTIVE NAVIGATION BUTTONS
   Left sidebar "you are here" indicator
   ================================================ */

/* Base nav button styles */
.nav-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-decoration: none;
}

.nav-button:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Inactive nav button */
.nav-button-inactive {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}

.nav-button-inactive:hover {
    background: var(--gray-50);
}

/* Dashboard Active ☀️ */
.nav-active-dashboard {
    background: linear-gradient(135deg, var(--dashboard-lightest) 0%, var(--dashboard-light) 100%);
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-text);
}

/* Library Active 🍑 */
.nav-active-library {
    background: linear-gradient(135deg, var(--library-light) 0%, var(--library-medium) 100%);
    border: 1px solid var(--library-border);
    color: var(--library-text-dark);
}

/* Supply Closet Active 🎾 */
.nav-active-supply {
    background: linear-gradient(135deg, var(--supply-lightest) 0%, var(--supply-medium) 100%);
    border: 1px solid var(--supply-accent);
    color: var(--supply-text-dark);
}

/* Builder/Results Active 💜 */
.nav-active-builder {
    background: linear-gradient(135deg, var(--builder-lightest) 0%, var(--builder-light) 100%);
    border: 1px solid var(--builder-border);
    color: var(--builder-text-dark);
}

/* Premium locked nav item */
.nav-button-locked {
    background: var(--gray-50);
    color: var(--gray-400);
    border: 1px solid var(--gray-200);
    cursor: pointer;
}

.nav-button-locked:hover {
    background: var(--gray-100);
    transform: none;
}

/* Premium badge */
.badge-premium {
    font-size: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/* Logout button */
.nav-button-logout {
    background: var(--white);
    color: var(--danger);
    border: 1px solid var(--gray-200);
}

.nav-button-logout:hover {
    background: var(--danger-light);
}

/* ================================================
   PRIMARY ACTION BUTTONS (CTAs)
   Right sidebar main action button
   ================================================ */

.btn-primary {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Dashboard CTA ☀️ */
.btn-primary-dashboard {
    background: linear-gradient(135deg, var(--dashboard-accent) 0%, var(--dashboard-base) 100%);
}

/* Library CTA 🍑 */
.btn-primary-library {
    background: linear-gradient(135deg, var(--library-accent) 0%, var(--library-base) 100%);
}

/* Supply Closet CTA 🎾 */
.btn-primary-supply {
    background: linear-gradient(135deg, var(--supply-accent) 0%, var(--supply-base) 100%);
}

/* Builder/Results CTA 💜 */
.btn-primary-builder {
    background: linear-gradient(135deg, var(--builder-base) 0%, var(--builder-dark) 100%);
}

/* Secondary button (white with border) */
.btn-secondary {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* ================================================
   TIP BOXES
   Right sidebar helpful tips
   ================================================ */

.tip-box {
    margin-top: 1.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.tip-box h3 {
    font-weight: 700;
    font-size: 0.75rem;
    margin: 0 0 0.25rem 0;
}

.tip-box p {
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
}

/* Dashboard Tip ☀️ */
.tip-box-dashboard {
    background-color: var(--dashboard-lightest);
    border: 1px solid var(--dashboard-border);
}
.tip-box-dashboard h3 { color: var(--dashboard-text); }
.tip-box-dashboard p { color: var(--dashboard-dark); }

/* Library Tip 🍑 */
.tip-box-library {
    background-color: var(--library-lightest);
    border: 1px solid var(--library-border);
}
.tip-box-library h3 { color: var(--library-text-dark); }
.tip-box-library p { color: var(--library-text); }

/* Supply Closet Tip 🎾 */
.tip-box-supply {
    background-color: var(--supply-lightest);
    border: 1px solid var(--supply-accent);
}
.tip-box-supply h3 { color: var(--supply-text-dark); }
.tip-box-supply p { color: var(--supply-text); }

/* Builder/Results Tip 💜 */
.tip-box-builder {
    background-color: var(--builder-lightest);
    border: 1px solid var(--builder-border);
}
.tip-box-builder h3 { color: var(--builder-text-dark); }
.tip-box-builder p { color: var(--builder-text); }

/* ================================================
   VIEW BUTTONS (Lesson cards, etc.)
   ================================================ */

.btn-view {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 80px;
    text-align: center;
}

.btn-view:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.btn-view-dashboard { background: linear-gradient(135deg, var(--dashboard-accent) 0%, var(--dashboard-base) 100%); }
.btn-view-library { background: linear-gradient(135deg, var(--library-accent) 0%, var(--library-base) 100%); }
.btn-view-supply { background: linear-gradient(135deg, var(--supply-accent) 0%, var(--supply-base) 100%); }
.btn-view-builder { background: linear-gradient(135deg, var(--builder-base) 0%, var(--builder-dark) 100%); }

/* ================================================
   PAGINATION
   ================================================ */

.pagination-active-dashboard { background: linear-gradient(135deg, var(--dashboard-accent) 0%, var(--dashboard-base) 100%); color: white; }
.pagination-active-library { background: linear-gradient(135deg, var(--library-accent) 0%, var(--library-base) 100%); color: white; }
.pagination-active-supply { background: linear-gradient(135deg, var(--supply-accent) 0%, var(--supply-base) 100%); color: white; }
.pagination-active-builder { background: linear-gradient(135deg, var(--builder-base) 0%, var(--builder-dark) 100%); color: white; }

/* ================================================
   TEXT LINKS
   ================================================ */

.link-dashboard { color: var(--dashboard-dark); }
.link-dashboard:hover { color: var(--dashboard-text); text-decoration: underline; }

.link-library { color: var(--library-text); }
.link-library:hover { color: var(--library-text-dark); text-decoration: underline; }

.link-supply { color: var(--supply-dark); }
.link-supply:hover { color: var(--supply-text); text-decoration: underline; }

.link-builder { color: var(--builder-text); }
.link-builder:hover { color: var(--builder-text-dark); text-decoration: underline; }

/* ================================================
   ACCENT NUMBERS (Stats, counts)
   ================================================ */

.accent-number-dashboard { color: var(--dashboard-dark); }
.accent-number-library { color: var(--library-text); }
.accent-number-supply { color: var(--supply-base); }
.accent-number-builder { color: var(--builder-text); }

/* ================================================
   FILTER BUTTON (Library sidebar)
   ================================================ */

.btn-filter-library {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--library-text-dark);
    background: linear-gradient(135deg, var(--library-medium) 0%, var(--library-border) 100%);
    border: 1px solid var(--library-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-filter-library:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ================================================
   TAB NAVIGATION (Library)
   ================================================ */

.tab-active-library {
    border-bottom: 2px solid var(--library-accent);
    color: var(--library-text-dark);
}

.tab-inactive {
    border-bottom: 2px solid transparent;
    color: var(--gray-500);
}

.tab-inactive:hover {
    color: var(--gray-700);
}

/* ================================================
   CARD HOVER STATES
   ================================================ */

.card-hover-dashboard:hover { border-color: var(--dashboard-border); }
.card-hover-library:hover { border-color: var(--library-border); }
.card-hover-supply:hover { border-color: var(--supply-accent); }
.card-hover-builder:hover { border-color: var(--builder-border); }

/* ================================================
   SUBJECT TAG (on lesson cards)
   ================================================ */

.tag-subject-library {
    background-color: var(--library-light);
    color: var(--library-text-dark);
    padding: 0.25rem 0.625rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* ================================================
   FOCUS STATES (Accessibility)
   ================================================ */

.focus-ring-dashboard:focus { 
    outline: none; 
    ring: 2px solid var(--dashboard-accent); 
    border-color: var(--dashboard-accent); 
}

.focus-ring-library:focus { 
    outline: none; 
    box-shadow: 0 0 0 2px var(--library-accent); 
    border-color: var(--library-accent); 
}

.focus-ring-supply:focus { 
    outline: none; 
    box-shadow: 0 0 0 2px var(--supply-accent); 
    border-color: var(--supply-accent); 
}

.focus-ring-builder:focus { 
    outline: none; 
    box-shadow: 0 0 0 2px var(--builder-accent); 
    border-color: var(--builder-accent); 
}

/* ================================================
   FUSION BADGE (Special - stays purple)
   ================================================ */

.badge-fusion {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, var(--fusion-start) 0%, var(--fusion-end) 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

/* ================================================
   UTILITY: Stats boxes (shared pattern)
   ================================================ */

.stat-box {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.stat-box-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-box-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
}