/* ==========================================================================
   SJCC LEARN — DESIGN TOKENS & COLOR SYSTEM (MASTER SPEC 2)
   Electric Royal Blue, Bento Grids, Editorial Typography & Glass Aesthetics
   ========================================================================== */

/* Typography: Roboto variable weights only + Material Symbols Rounded */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* ------------------- Typography (Roboto Only) ------------------- */
  --font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto', ui-monospace, SFMono-Regular, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: clamp(2.5rem, 5vw, 4.25rem); /* Display headlines */

  --leading-none: 1.05;
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ------------------- Master Spec 2 Color System ------------------- */
  --primary:        #1D3FD6;   /* Electric royal blue — solid feature cards, CTAs */
  --primary-hover:  #1733B3;
  --primary-active: #13278C;
  --primary-light:  #6F83EA;   /* Periwinkle — second line of two-tone headlines */
  --primary-soft:   #E9EDFC;   /* Chips, selected rows, soft panels */
  --section-tint:   #F2F4FB;   /* Alternating section background */
  --stat-surface:   #F4F4F5;   /* Stat cards */
  --ink:            #0E1330;   /* Headings on white */
  --text:           #0E1330;
  --text-2:         #4A5070;   /* Body secondary */
  --text-3:         #7A819F;   /* Subtle labels */
  --text-inverse:   #FFFFFF;

  --border:         #E3E6F0;
  --border-light:   #EEF0F8;
  --border-dark:    #CBD1E4;
  --divider:        #E3E6F0;

  --surface:        #FFFFFF;
  --surface-2:      #F8F9FD;
  --surface-3:      #F0F2FA;
  --surface-elevated: #FFFFFF;
  --surface-card:   #FFFFFF;

  --paper:          #EEEBE1;   /* Warm cream — used ONLY for editorial/CTA bands */
  --accent-teal:    #14C4B0;   /* Thin line-art graphics, progress highlights */
  --accent-coral:   #F07A5A;   /* Rare accent: warnings, one highlight per page max */

  --success:        #1E8E3E;
  --success-hover:  #188038;
  --success-soft:   #E6F4EA;

  --warning:        #F9AB00;
  --warning-hover:  #E37400;
  --warning-soft:   #FEF7E0;

  --danger:         #D93025;
  --danger-hover:   #C5221F;
  --danger-soft:    #FCE8E6;

  /* Signature Gradient: Electric royal to periwinkle */
  --gradient-signature: linear-gradient(135deg, #1D3FD6 0%, #4F6FE8 55%, #A9BBF5 100%);

  /* ------------------- Shape & Radii ------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;     /* Small chips, badges */
  --radius-md: 16px;    /* Bento cards, standard containers */
  --radius-lg: 20px;    /* Major panels, modals */
  --radius-glass: 28px; /* Reference 4 glass profile cards */
  --radius-pill: 999px; /* Pill buttons, chips */
  --radius-circle: 50%;

  /* ------------------- Spacing (4px grid) ------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ------------------- Depth & Shadows ------------------- */
  --shadow-1: 0 2px 4px rgba(14, 19, 48, 0.04), 0 1px 2px rgba(14, 19, 48, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 19, 48, 0.08), 0 2px 4px rgba(14, 19, 48, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 19, 48, 0.12), 0 4px 8px rgba(14, 19, 48, 0.04);
  --shadow-modal: 0 20px 48px rgba(14, 19, 48, 0.22);
  --shadow-glass: 0 8px 32px rgba(29, 63, 214, 0.12);

  /* ------------------- Transitions ------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------- Layout Dimensions ------------------- */
  --header-height: 64px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --container-max: 1280px;

  /* ------------------- Accessibility Focus Ring ------------------- */
  --focus-ring: 0 0 0 3px rgba(29, 63, 214, 0.3);
}

/* ==========================================================================
   Dark Theme ([data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] {
  --surface:          #121214;
  --surface-2:        #18181B;
  --surface-3:        #222226;
  --surface-card:     #1E1E21;
  --surface-elevated: #2A2A2D;
  --stat-surface:     #1E1E21;
  --section-tint:     #17171A;
  --paper:            #1E1D19;

  --ink:              #F2F2F4;
  --text:             #F2F2F4;
  --text-2:           #9A9AA3;
  --text-3:           #71717A;
  --text-inverse:     #121214;

  --border:           #33343A;
  --border-light:     #27272A;
  --border-dark:      #44454E;
  --divider:          #2A2A2E;

  --primary:          #7D93FF;
  --primary-hover:    #98A9FF;
  --primary-active:   #B4C2FF;
  --primary-light:    #A9B6FF;
  --primary-soft:     rgba(125, 147, 255, 0.16);

  --success:          #81C995;
  --success-hover:    #A8DAB5;
  --success-soft:     rgba(129, 201, 149, 0.16);

  --warning:          #FDD663;
  --warning-hover:    #FFE082;
  --warning-soft:     rgba(253, 214, 99, 0.16);

  --danger:           #F28B82;
  --danger-hover:     #F6AEA9;
  --danger-soft:      rgba(242, 139, 130, 0.16);

  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.75);
  --shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.85);

  --focus-ring: 0 0 0 3px rgba(125, 147, 255, 0.35);
}

/* ==========================================================================
   Sepia Theme (Preserved for Video Lecture & PDF Reader Comfort)
   ========================================================================== */
[data-theme="sepia"] {
  --surface: #FBF0D9;
  --surface-2: #F3E5C8;
  --surface-3: #E9D7B7;
  --surface-elevated: #FFF7E6;
  --surface-card: #F6EBD1;
  --stat-surface: #EFE2C6;
  --section-tint: #F7EBD3;
  --paper: #E6D7B7;

  --ink: #3D2D1B;
  --text: #3D2D1B;
  --text-2: #6E5A44;
  --text-3: #8D775E;
  --text-inverse: #FBF0D9;

  --border: #DFCEA9;
  --border-light: #E7D8B9;
  --border-dark: #C9B489;
  --divider: #DFCEA9;

  --primary: #9C5212;
  --primary-hover: #B56015;
  --primary-light: #C47936;
  --primary-soft: rgba(156, 82, 18, 0.14);

  --focus-ring: 0 0 0 3px rgba(156, 82, 18, 0.35);
}

/* Responsive Dimensions */
@media (max-width: 768px) {
  :root {
    --text-3xl: 2rem;
    --text-2xl: 1.625rem;
    --text-xl: 1.375rem;
    --text-lg: 1.125rem;
    --header-height: 56px;
    --sidebar-width: 280px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-3xl: 1.75rem;
    --text-2xl: 1.375rem;
    --text-xl: 1.25rem;
  }
}

/* Reduced Motion Preference (Futuristic motions disabled when requested) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}