/**
 * ============================================================================
 * الثانوية التأهيلية الفرح الحرة — Design System Tokens
 * Source of truth: design/tokens.css
 * Consumed by: website/ (Hugo) & communication/ (Next.js)
 * Direction: Apple Human Interface Guidelines — neutral greys, translucent
 * blurred bars, thin hairlines, small radii, one accent colour.
 * ============================================================================
 */

/* --------------------------------------------------------------------------
 * SAUDI FOUNDING DAY ARABIC FONT (الخط الأول / Al-Awwal)
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Al-Awwal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/al-awwal-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Al-Awwal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/al-awwal-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Al-Awwal';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/al-awwal-bold.woff2') format('woff2');
}

:root {
  /* --------------------------------------------------------------------------
   * 1. COLOUR SYSTEM
   * - Olive (the only accent): from the school emblem
   * - Ground: Apple's light neutral grey, surfaces are white
   * - Ink: near-black for high legibility
   * -------------------------------------------------------------------------- */

  /* Accent: Olive (School Logo) — the only accent colour in the system */
  --olive-900: #242E1B;   /* Deep ink olive, headings, strong contrast */
  --olive-800: #303D24;
  --olive-700: #3F5130;   /* Text-safe olive */
  --olive-600: #4F643D;
  --olive-500: #61794A;   /* Brand olive: links, primary buttons, focus rings, active nav item */
  --olive-400: #7E9665;
  --olive-300: #A3B389;   /* Muted borders, soft icons */
  --olive-200: #C5D2B3;
  --olive-100: #E4EAD9;   /* Tinted surfaces */
  --olive-50:  #F2F6ED;   /* Subtle row highlight */

  /* Neutrals & Surfaces (Apple HIG: #F5F5F7 ground family) */
  --paper:       #F5F5F7; /* Light neutral grey page background */
  --paper-subtle:#EDEDEF; /* Slightly deeper grey for alternating sections */
  --surface:     #FFFFFF; /* Cards, sheets, bars */
  --surface-raised: #FFFFFF;
  --ink:         #1D1D1F; /* Primary body copy, near-black (15.5:1 on paper) */
  --ink-muted:   #6E6E73; /* Secondary copy, subtitles, dates (4.7:1 on paper) */
  --ink-faint:   #86868B; /* Captions, disabled text — decorative only, below 4.5:1 */
  --border:      rgba(0, 0, 0, 0.12); /* Neutral hairline, not tinted olive */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.22);

  /* Translucent bars (nav, top bar, drawer header) */
  --bar-bg:   rgba(255, 255, 255, 0.72);
  --bar-blur: saturate(180%) blur(20px);

  /* Status Colors (strict separation from the olive accent) */
  --status-success:      var(--olive-700);
  --status-success-bg:   var(--olive-100);
  --status-warning:      #8F581B; /* Warm amber-brown */
  --status-warning-bg:   #FEF3E2;
  --status-danger:       #8A2418; /* Deep crimson-brown, clearly distinct from olive */
  --status-danger-bg:    #FDECEB;
  --status-whatsapp:     #25D366; /* WhatsApp action green — isolated exclusively for WhatsApp dispatch */
  --status-whatsapp-dark:#128C7E;

  /* --------------------------------------------------------------------------
   * 2. TYPOGRAPHY
   * Display & Body: Saudi Founding Day Arabic Font (Al-Awwal / الخط الأول)
   * Numbers: Western digits (0-9) per Moroccan national standard
   * -------------------------------------------------------------------------- */
  --font-display: 'Al-Awwal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Sans", sans-serif;
  --font-body:    'Al-Awwal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;

  /* Type Scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Leading */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.85; /* Arabic body text requires generous leading */
  --leading-loose:   2.1;

  /* --------------------------------------------------------------------------
   * 3. GEOMETRY & RADIUS (Apple HIG)
   * Small, understated radii; a full pill is kept only for segmented
   * controls and toggles.
   * -------------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px; /* Segmented controls, toggles */

  /* --------------------------------------------------------------------------
   * 4. SHADOWS & ELEVATION
   * Flat and neutral (no tinted colour), Apple HIG style
   * -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* --------------------------------------------------------------------------
   * 5. SPACING SYSTEM
   * -------------------------------------------------------------------------- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Layout Widths */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-reading: 68ch;

  /* --------------------------------------------------------------------------
   * 6. TRANSITIONS & ANIMATIONS
   * -------------------------------------------------------------------------- */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}