/* CourseOS · Global CSS Variables
   All colors, spacing, and type scale live here.
   Edit this file to change the look of the entire app. */

:root {
  /* ── Brand Colors ─────────────────────────────── */
  --color-red:    #DA0000;
  --color-orange: #EE4F07;
  --color-blue:   #41B4D3;
  --color-teal:   #23C7AF;
  --color-yellow: #FFC121;
  --color-navy:   #0D1B2E;

  /* ── Course Colors ────────────────────────────── */
  --course-cisc1100: #41B4D3;
  --course-cisc2350: #EE4F07;
  --course-theo1000: #23C7AF;
  --course-phi1000:  #FFC121;

  /* ── Neutral Scale ────────────────────────────── */
  --gray-50:  #F8F8F8;
  --gray-100: #F0F0F0;
  --gray-200: #E0E0E0;
  --gray-300: #CCCCCC;
  --gray-400: #AAAAAA;
  --gray-500: #888888;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-900: #111111;

  /* ── Semantic Colors ──────────────────────────── */
  --color-urgent:   #DA0000;
  --color-soon:     #EE4F07;
  --color-safe:     #23C7AF;
  --color-warning:  #FFC121;
  --color-purple:   #8B5CF6;

  /* ── Compose / TTS accent ──────────────────────── */
  --color-teal-light: #E8F8F5;
  --color-teal-text:  #1A8A6A;
  --color-danger-text: #C0392B;

  /* ── Background ───────────────────────────────── */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F8F8F8;
  --bg-tertiary:  #F0F0EC;

  /* ── Text ─────────────────────────────────────── */
  --text-primary:   #111111;
  --text-secondary: #666666;
  --text-muted:     #AAAAAA;

  /* ── Borders ──────────────────────────────────── */
  --border-color:  #E0E0E0;
  --border-width:  0.5px;

  /* ── Spacing ──────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  14px;
  --space-lg:  20px;
  --space-xl:  32px;

  /* ── Typography ───────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-xs:   10px;
  --font-sm:   12px;
  --font-base: 14px;
  --font-lg:   18px;
  --font-xl:   22px;
  --font-2xl:  28px;

  /* ── Border Radius ────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);

  /* ── Transitions ──────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Layout ───────────────────────────────────── */
  --nav-height: 72px;
  --header-height: 72px;
  --max-width: 430px;

  /* ── Responsive Breakpoints ─────────────────── */
  --content-phone: 430px;
  --content-tablet: 720px;
  --content-desktop: 960px;
  --reading-max: 700px;
}