/* ============================================
   MOTIVE FLIP — DESIGN SYSTEM VARIABLES
   "Where Learning Speaks Through You"
   ============================================ */

/* --- READEX PRO (self-hosted static faces, Latin + Arabic) --- */
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/ReadexPro-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/ReadexPro-Light.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ReadexPro-Regular.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ReadexPro-Medium.ttf') format('truetype'); }
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ReadexPro-SemiBold.ttf') format('truetype'); }
/* Bold face also serves 700–900 (extrabold/black) requests */
@font-face { font-family:'Readex Pro'; font-style:normal; font-weight:700 900; font-display:swap; src:url('fonts/ReadexPro-Bold.ttf') format('truetype'); }

/* ============================================
   GLOBAL & ANIMATIONS
   ============================================ */
:root {
  --font-primary: 'Readex Pro', sans-serif;
  --font-mono: 'Readex Pro', 'Courier New', monospace;

  /* --- BRAND PALETTE (from the Motive Flip pinwheel logo) --- */
  --brand-red: #C2413B;
  --brand-red-hover: #A5352F;
  --brand-red-light: rgba(194, 65, 59, 0.12);
  --brand-purple: #6A5B7A;
  --brand-purple-hover: #574A66;
  --brand-purple-light: rgba(106, 91, 122, 0.12);
  --brand-gold: #CAA24A;
  --brand-gold-hover: #A87E2C;
  --brand-gold-light: rgba(202, 162, 74, 0.14);
  --brand-blue: #4A6B8A;
  --brand-blue-hover: #3B586F;
  --brand-blue-light: rgba(74, 107, 138, 0.12);
  --brand-green: #4B7A6A;
  --brand-green-hover: #3D6557;
  --brand-green-light: rgba(75, 122, 106, 0.12);

  /* Primary accent = the signature Motive Flip red */
  --brand-accent: #C2413B;
  --brand-accent-hover: #A5352F;
  --brand-accent-light: rgba(194, 65, 59, 0.12);

  --reward-gold: #CAA24A;
  --reward-silver: #9BA4B4;
  --reward-bronze: #B0763A;
  --reward-xp: #4B7A6A;

  --color-success: #4B7A6A;
  --color-success-light: rgba(75, 122, 106, 0.14);
  --color-warning: #CAA24A;
  --color-warning-light: rgba(202, 162, 74, 0.16);
  --color-danger: #C2413B;
  --color-danger-light: rgba(194, 65, 59, 0.12);
  --color-info: #4A6B8A;
  --color-info-light: rgba(74, 107, 138, 0.12);

  --shadow-sm: 0 1px 3px rgba(40,30,45,0.08), 0 1px 2px rgba(40,30,45,0.06);
  --shadow-md: 0 4px 6px rgba(40,30,45,0.07), 0 2px 4px rgba(40,30,45,0.06);
  --shadow-lg: 0 10px 15px rgba(40,30,45,0.1), 0 4px 6px rgba(40,30,45,0.07);
  --shadow-xl: 0 20px 25px rgba(40,30,45,0.12), 0 10px 10px rgba(40,30,45,0.06);
  --shadow-float: 0 25px 50px rgba(40,30,45,0.18);
  --shadow-glow: 0 0 20px rgba(194, 65, 59, 0.4);

  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.90); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes float-slow { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(194, 65, 59, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(194, 65, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 65, 59, 0); } }

/* --- ANIMATION UTILITIES --- */
.anim-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-slide-in-right { animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; }
.anim-scale-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-float-slow { animation: float-slow 6s ease-in-out infinite; }
.anim-pulse-glow { animation: pulse-glow 2s infinite; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* Interactive Hovers */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-glow:hover { box-shadow: var(--shadow-glow); border-color: var(--brand-accent); }
.hover-scale { transition: transform var(--transition-fast); }
.hover-scale:hover { transform: scale(1.05); }

/* Custom Tooltip via CSS */
[data-tooltip] { position: relative; cursor: pointer; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
  padding: 6px 10px; background: #2A2233; color: white; font-size: 11px; font-weight: 600;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]::after {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px);
  border-width: 5px; border-style: solid; border-color: #2A2233 transparent transparent transparent;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(-10px); }
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0px); }


/* ============================================
   STUDENT PORTAL THEME
   ============================================ */
.portal-student {
  --portal-bg: #F7F3EF;
  --portal-bg-secondary: #EFE8E1;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #FAF7F3;
  --portal-sidebar-bg: #2A2233;
  --portal-sidebar-active: #C2413B;
  --portal-sidebar-hover: rgba(194,65,59,0.14);
  --portal-sidebar-text: rgba(255,255,255,0.75);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(42,34,51,0.06);

  --portal-text-primary: #2A2233;
  --portal-text-secondary: #6B6472;
  --portal-text-muted: #9C94A2;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(42,34,51,0.07);
  --portal-card-radius: 8px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-lg);

  --input-bg: #FAF7F3;
  --input-border: #E7DFD6;
  --input-border-focus: #C2413B;
  --input-radius: 10px;
  --input-padding: 12px 16px;

  --btn-primary-bg: #C2413B;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #A5352F;
  --btn-secondary-bg: #F2EBE4;
  --btn-secondary-text: #2A2233;
  --btn-secondary-hover: #E9E0D7;
  --btn-radius: 10px;

  --space-sidebar: 260px;
  --space-topbar: 68px;

  --progress-height: 8px;
  --progress-radius: 4px;
  --progress-bg: #EFE8E1;
  --progress-fill: linear-gradient(90deg, #C2413B, #CAA24A);
}

/* ============================================
   TEACHER PORTAL THEME
   ============================================ */
.portal-teacher {
  --portal-bg: #F2F5F7;
  --portal-bg-secondary: #E6ECF0;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F6F8FA;
  --portal-sidebar-bg: #22303B;
  --portal-sidebar-active: #4A6B8A;
  --portal-sidebar-hover: rgba(74,107,138,0.16);
  --portal-sidebar-text: rgba(255,255,255,0.72);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(34,48,59,0.08);

  --portal-text-primary: #22303B;
  --portal-text-secondary: #64707A;
  --portal-text-muted: #95A0A9;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(34,48,59,0.08);
  --portal-card-radius: 6px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F6F8FA;
  --input-border: #DDE4E9;
  --input-border-focus: #4A6B8A;
  --input-radius: 4px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #4A6B8A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #3B586F;
  --btn-secondary-bg: #EAF0F5;
  --btn-secondary-text: #4A6B8A;
  --btn-secondary-hover: #DCE6EE;
  --btn-radius: 4px;

  --space-sidebar: 240px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 3px;
  --progress-bg: #EAF0F5;
  --progress-fill: linear-gradient(90deg, #4A6B8A, #6A5B7A);

  --table-header-bg: #F6F8FA;
  --table-row-hover: rgba(74,107,138,0.05);
  --table-border: #DDE4E9;
}

/* ============================================
   ADMIN PORTAL THEME
   ============================================ */
.portal-admin {
  --portal-bg: #F5F3F6;
  --portal-bg-secondary: #ECE7EF;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #FAF8FB;
  --portal-sidebar-bg: #272031;
  --portal-sidebar-active: #6A5B7A;
  --portal-sidebar-hover: rgba(106,91,122,0.18);
  --portal-sidebar-text: rgba(255,255,255,0.68);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(39,32,49,0.08);

  --portal-text-primary: #272031;
  --portal-text-secondary: #6B6472;
  --portal-text-muted: #9C94A2;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(39,32,49,0.08);
  --portal-card-radius: 6px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #FAF8FB;
  --input-border: #E4DEE8;
  --input-border-focus: #6A5B7A;
  --input-radius: 4px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #6A5B7A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #574A66;
  --btn-secondary-bg: #F1EDF4;
  --btn-secondary-text: #6A5B7A;
  --btn-secondary-hover: #E7DFEC;
  --btn-radius: 4px;

  --space-sidebar: 250px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 3px;
  --progress-bg: #F1EDF4;
  --progress-fill: linear-gradient(90deg, #6A5B7A, #C2413B);

  --table-header-bg: #FAF8FB;
  --table-row-hover: rgba(106,91,122,0.05);
  --table-border: #E4DEE8;

  --stat-1-bg: linear-gradient(135deg, #6A5B7A, #837299);
  --stat-2-bg: linear-gradient(135deg, #4A6B8A, #5E82A4);
  --stat-3-bg: linear-gradient(135deg, #4B7A6A, #5F9683);
  --stat-4-bg: linear-gradient(135deg, #C2413B, #D65A54);
  --stat-5-bg: linear-gradient(135deg, #CAA24A, #A87E2C);
}