/**
 * Base CSS Variables
 * 
 * This file contains default values for all CSS variables used across the application.
 */

/* || Root Variables */

:root {
   /* Base font size for rem calculations (1rem = 16px) */
   font-size: 16px;

   /* || Typography */

   /* Font Families */
   --font-family-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
   --font-family-title: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

   /* Font Sizes - all in rem for scalability */
   --font-size-title-lg: 3rem;
   --font-size-nav: 1.625rem;
   --font-size-header-1: 2.25rem;
   --font-size-header-2: 1.875rem;
   --font-size-header-3: 1.5625rem;
   --font-size-header-4: 1.375rem;
   --font-size-body: 1rem;
   --font-size-small: 0.875rem;
   --font-size-nav-link: 1.1875rem;

   /* Line Heights - all in rem for consistency */
   --line-height-title-lg: 2.5rem;
   --line-height-nav: 1.75rem;
   --line-height-header-lg: 2.25rem;
   --line-height-header-md: 2rem;
   --line-height-body: 1.5rem;
   --line-height-small: 1.25rem;

   /* || Colors & Backgrounds */

   /* Main Background Colors */
   --bg-main: #F4F8FC;
   --bg-card: #FBFDFF;

   /* Surface & Border Colors */
   --bg-surface: #F8FBFF;
   --bg-surface-muted: #EEF5FC;
   --bg-surface-strong: #E3EEF9;
   --border-subtle: #D5E2EF;
   --border-strong: #B6C9DC;

   /* Option Colors (for interactive elements) */
   --bg-option-1: #46A372;
   --bg-option-2: #5A9FD4;

   /* Accent Palette */
   --colour-accent: #4F8FD8;
   --colour-accent-strong: #3C78BF;
   --colour-accent-soft: #E7F1FB;
   --colour-accent-amber: #F0B55A;

   /* Text Colours */
   --colour-text-primary: #1F2D3D;
   --colour-text-secondary: #5F7388;
   --colour-text-muted: #8FA2B7;
   --colour-text-contrast: #132131;
   --colour-text-on-accent: #FFFFFF;
   --colour-text: var(--colour-text-primary);

   /* Shared neutral and overlay colours */
   --colour-surface-white: #FFFFFF;
   --colour-overlay-soft: rgba(0, 0, 0, 0.04);
   --colour-overlay-medium: rgba(0, 0, 0, 0.1);
   --colour-overlay-strong: rgba(0, 0, 0, 0.15);
   --colour-overlay-modal: rgba(0, 0, 0, 0.35);
   --colour-overlay-modal-strong: rgba(0, 0, 0, 0.4);
   --colour-overlay-light: rgba(255, 255, 255, 0.7);
   --colour-overlay-light-strong: rgba(255, 255, 255, 0.9);
   --colour-border-overlay: rgba(31, 41, 55, 0.12);

   /* Focus and interactive emphasis */
   --colour-focus: #3B82F6;
   --colour-focus-strong: #1A5FD0;
   --colour-focus-ring: rgba(59, 130, 246, 0.2);
   --colour-focus-ring-strong: rgba(59, 130, 246, 0.25);

   /* Link Colours */
   --colour-link: #4F8FD8;
   --colour-link-hover: #3C78BF;

   /* Compatibility aliases for existing styles */
   --colour-primary: var(--colour-text-primary);
   --colour-secondary: var(--colour-text-secondary);
   --colour-muted: var(--colour-text-muted);
   --colour-contrast: var(--colour-text-contrast);

   /* Quiz & Lesson Colours */
   --colour-success: #2F9E62;
   --colour-success-strong: #2F7A4E;
   --colour-danger: #CF4E62;
   --colour-danger-border-soft: rgba(215, 58, 73, 0.3);
   --colour-danger-strong: #B4233D;
   --colour-status-neutral: #6B7280;
   --colour-quiz-correct: var(--colour-success);
   --colour-quiz-incorrect: var(--colour-danger);
   --bg-quiz-correct: #DDF5E8;
   --bg-quiz-incorrect: #FCECEF;
   --colour-table-head: #2F4A66;
   --colour-thead: var(--colour-table-head);

   /* Note Colors */
   --bg-note-info: #E6F2FB;
   --border-note-info: var(--colour-accent);
   --bg-note-tip: #E7F4ED;
   --border-note-tip: var(--bg-option-1);
   --bg-note-warning: #FFF3DF;
   --border-note-warning: var(--colour-accent-amber);

   /* Block Colors */
   --bg-block-quote: #F1F6FB;
   --border-block-quote: #CBDCEC;
   --bg-block-warning: #FFF5D9;
   --border-block-warning: #E8CF88;

   /* Gradients */
   --gradient-soft-sunrise: linear-gradient(135deg, #f7fbff 0%, #edf4fb 45%, #f7fbff 100%);
   --gradient-highlight: linear-gradient(120deg, #e7f1fb 0%, #eef5fc 100%);

   /* || Layout & Spacing */

   /* Main Layout */
   --nav-height: 4rem;
   --gap-main: 4.5rem;
   --gap-medium: 3rem;
   --gap-small: 2rem;
   --gap-xsmall: 1rem;
   --padding-card: 0.625rem;
   --padding-section: 1.5rem;

   /* Scroll Dimensions */
   --scroll-width: 37rem;
   --scroll-height: 21rem;

   /* Border Radius */
   --radius-small: 0.25rem;
   --radius-medium: 0.625rem;
   --radius-large: 0.875rem;
   --radius-round: 0.875rem;
   --radius-pill: 999px;

   /* Shadows */
   --shadow-flash: 0 4px 12px rgba(28, 51, 78, 0.12);
   --shadow-nav: 0 2px 12px rgba(28, 51, 78, 0.1);
   --shadow-card: 0 2px 4px rgba(28, 51, 78, 0.08);
   --shadow-warning: 0 3px 8px rgba(240, 181, 90, 0.18);
   --shadow-soft: 0 8px 24px rgba(28, 51, 78, 0.12);
   --shadow-strong: 0 12px 32px rgba(28, 51, 78, 0.18);

   /* Motion */
   --transition-base: 0.2s ease;

   /* || Z-Index Layers */

   --z-index-background: -1; /* Decorations & Backgrounds */
   --z-index-overlay: 100;
   --z-index-top: 999;
   --z-index-nav: 1000;
   --z-index-modal: 1100;
   --z-index-flash: 1200;
   --z-index-god: 10000;

}