/* ==========================================================================
   Qitaa Design Tokens
   Canonical source: /DESIGN_SYSTEM.md
   Every color, font, spacing value, and radius used anywhere must be
   defined here. No hardcoded values in templates.
   ========================================================================== */

:root {
  /* ========================================================================
     2. COLOR PALETTE
     ======================================================================== */

  /* --- Primary (Teal) --- */
  --qitaa-teal-900: #0A3D4A;  /* Darker variant — text on cream, deep accents */
  --qitaa-teal-700: #0F4C5C;  /* PRIMARY — hero backgrounds, brand color */
  --qitaa-teal-500: #1E6B7A;  /* Lighter variant — secondary surfaces */
  --qitaa-teal-200: #C8D8DC;  /* Pale teal — subtle backgrounds, hover states on dark */

  /* --- Secondary / CTA accent (Orange) --- */
  --qitaa-orange-700: #C25E00;  /* Darker variant — hover state, deep CTAs */
  --qitaa-orange-500: #F77F00;  /* PRIMARY ACCENT — main CTAs */
  --qitaa-orange-200: #FCE0BD;  /* Pale orange — badges, subtle accents */

  /* --- Neutrals --- */
  --qitaa-cream:           #FAFAF7;  /* Page background, off-white surfaces */
  --qitaa-paper:           #FFFFFF;  /* Cards, elevated surfaces */
  --qitaa-border:          #E5E5E1;  /* Default borders, dividers */
  --qitaa-text:            #2C2C2A;  /* Body text, headings on light */
  --qitaa-text-soft:       #6F6F6A;  /* Meta text, labels, secondary info */
  --qitaa-text-on-dark:    #FAFAF7;  /* Headings on teal backgrounds */
  --qitaa-text-on-dark-soft: #C8D8DC; /* Subheads on teal backgrounds */

  /* --- Status colors --- */
  --qitaa-verified:        #52796F;  /* Verified badge — muted green */
  --qitaa-verified-bg:     #E1F5EE;  /* Verified badge background */
  --qitaa-verified-text:   #0F6E56;  /* Verified badge text */

  --qitaa-claimed:         #8C5028;  /* Claimed badge — warm brown */
  --qitaa-claimed-bg:      #FAEEDA;  /* Claimed badge background */

  --qitaa-rating:          #E8C547;  /* Star rating gold */

  --qitaa-success:         #16A34A;  /* Open now, live status */
  --qitaa-warning:         #D97706;  /* Warnings, alerts */
  --qitaa-error:           #9D2933;  /* Errors, closed status */


  /* ========================================================================
     3. TYPOGRAPHY
     ======================================================================== */

  /* --- Font stacks --- */
  --font-serif:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-arabic: 'Reem Kufi', 'Tajawal', sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, monospace;

  /* --- Type scale ---
       Format: font-size / line-height / font-weight / letter-spacing
   */
  --text-display: 36px / 1.15 / 500 / -0.01em;  /* Newsreader — Hero H1 only */
  --text-h1:       28px / 1.2  / 500 / -0.01em;  /* Newsreader — Page titles */
  --text-h2:       22px / 1.25 / 500 / 0;         /* Newsreader — Section headers */
  --text-h3:       17px / 1.3  / 500 / 0;         /* Newsreader — Card titles */
  --text-body:     15px / 1.6  / 400 / 0;         /* Inter — Body copy */
  --text-small:    13px / 1.5  / 400 / 0;         /* Inter — Secondary text */
  --text-meta:     12px / 1.5  / 400 / 0;         /* Inter — Labels, captions */
  --text-label:    11px / 1.4  / 500 / 0.08em;    /* Inter UPPERCASE — Eyebrow labels */


  /* ========================================================================
     4. LAYOUT
     ======================================================================== */

  /* --- Spacing scale (4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Page widths --- */
  --width-narrow:  640px;   /* Forms, blog posts, content pages */
  --width-content: 960px;   /* Standard pages */
  --width-wide:   1200px;   /* Listing pages with sidebars */
  --width-full:   1440px;   /* Hero sections, max */

  /* --- Corner radii --- */
  --radius-xs:    4px;   /* Pills, tags, small badges */
  --radius-sm:    6px;   /* Inputs, dropdowns */
  --radius-md:    8px;   /* Buttons, small cards */
  --radius-lg:   12px;   /* Cards, panels, hero sections */
  --radius-full: 999px;  /* Pills, avatars */

  /* --- Shadows (teal-tinted, not gray) --- */
  --shadow-sm: 0 1px 2px rgba(15, 76, 92, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 76, 92, 0.06);
  --shadow-lg: 0 4px 12px rgba(15, 76, 92, 0.08);
}