/* ================================================================
   TTU Student Cloud — Design System Variables
   Brand: Navy #0A2A7A | Gold #FFC107 | Crimson #D90429
   Desktop-first responsive web application
================================================================ */

:root {
  /* Brand */
  --primary:       #0A2A7A;
  --primary-dark:  #071d56;
  --primary-mid:   #1a3d8f;
  --primary-light: #e8eeff;
  --primary-50:    #f0f3ff;
  --accent:        #FFC107;
  --accent-dark:   #b38a06;
  --crimson:       #D90429;
  --crimson-light: #fff0f3;
  --success:       #059669;
  --success-light: #ecfdf5;
  --warning:       #d97706;
  --warning-light: #fffbeb;
  --info:          #2563eb;
  --info-light:    #eff6ff;

  /* Course gradients */
  --grad-afst: linear-gradient(135deg, #0A2A7A 0%, #2563eb 100%);
  --grad-comm: linear-gradient(135deg, #065f46 0%, #10b981 100%);
  --grad-comp: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%);
  --grad-math: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
  --grad-eng:  linear-gradient(135deg, #9d174d 0%, #ec4899 100%);

  /* Light mode surfaces */
  --bg:        #F2F5FC;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FF;
  --surface-3: #EEF2FD;
  --border:    #E2E8F6;
  --border-2:  #CBD5EC;

  /* Text */
  --text:    #0D1B3E;
  --text-2:  #3D506E;
  --text-3:  #8A97B5;
  --text-inv:#FFFFFF;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(10,42,122,.06);
  --shadow-sm: 0 2px 8px rgba(10,42,122,.08);
  --shadow:    0 4px 16px rgba(10,42,122,.10);
  --shadow-md: 0 8px 32px rgba(10,42,122,.12);
  --shadow-lg: 0 16px 48px rgba(10,42,122,.15);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full:9999px;

  /* Typography */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --sidebar-w:    260px;
  --sidebar-coll: 68px;
  --topbar-h:     64px;

  /* Transitions */
  --t:   160ms ease;
  --t2:  260ms ease;
  --t3:  360ms cubic-bezier(.4,0,.2,1);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg:        #0A0F20;
  --surface:   #121829;
  --surface-2: #1A2236;
  --surface-3: #1F2A40;
  --border:    #263050;
  --border-2:  #344070;
  --text:      #E8EEFF;
  --text-2:    #8897C0;
  --text-3:    #5A6890;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-md: 0 8px 32px rgba(0,0,0,.6);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.7);
  --primary-light: rgba(10,42,122,.3);
  --primary-50:    rgba(10,42,122,.15);
  --success-light: rgba(5,150,105,.15);
  --warning-light: rgba(217,119,6,.15);
  --info-light:    rgba(37,99,235,.15);
  --crimson-light: rgba(217,4,41,.15);
}