/**
 * Ataa Design System — CSS Custom Properties
 *
 * Directions:
 *   fajr   — Warm ivory · Deep emerald · Rich gold (default/recommended)
 *   risala — Crisp white · Deep teal · Amber gold
 *   hadara — Near-black · Teal glow · Warm gold (dark luxury)
 *
 * @package Ataa
 * @version 1.0.0
 */

/* ═══════════════════════════════════════════════════════
   DIRECTION 1: الفجر — Fajr (DEFAULT — recommended)
═══════════════════════════════════════════════════════ */
:root,
[data-ataa-dir="fajr"] {
	/* Backgrounds */
	--ataa-bg:         oklch(0.96 0.014 84);
	--ataa-bg2:        oklch(0.91 0.022 82);
	--ataa-surface:    oklch(0.99 0.005 84);
	--ataa-border:     oklch(0.87 0.022 82);

	/* Brand */
	--ataa-primary:    oklch(0.28 0.092 155);
	--ataa-primary-h:  oklch(0.35 0.10  155);
	--ataa-gold:       oklch(0.73 0.105 78);
	--ataa-gold-pale:  oklch(0.94 0.04  84);

	/* Text */
	--ataa-text:       oklch(0.13 0.015 155);
	--ataa-muted:      oklch(0.50 0.025 155);
	--ataa-inv:        oklch(0.97 0.006 84);

	/* Hero / dark backgrounds */
	--ataa-hero:       oklch(0.22 0.09  155);
	--ataa-hero2:      oklch(0.17 0.07  155);

	/* State */
	--ataa-progress:   oklch(0.73 0.105 78);
	--ataa-urgent:     oklch(0.55 0.18  35);
	--ataa-success:    oklch(0.50 0.15  145);
	--ataa-error:      oklch(0.50 0.20  25);

	/* Buttons */
	--ataa-btn-bg:     oklch(0.73 0.105 78);
	--ataa-btn-text:   oklch(0.17 0.06  155);

	/* Radius */
	--ataa-r:          16px;
	--ataa-rb:         12px;
	--ataa-rpill:      999px;

	/* Shadows */
	--ataa-shadow-sm:  0 2px 8px oklch(0 0 0 / 0.07);
	--ataa-shadow-md:  0 8px 28px oklch(0 0 0 / 0.12);
	--ataa-shadow-lg:  0 16px 48px oklch(0 0 0 / 0.16);

	/* Geometric pattern overlay (low-opacity) */
	--ataa-pat:        oklch(1 0 0 / 0.045);
}

/* ═══════════════════════════════════════════════════════
   DIRECTION 2: الرسالة — Risala
═══════════════════════════════════════════════════════ */
[data-ataa-dir="risala"] {
	--ataa-bg:         oklch(0.97 0.004 195);
	--ataa-bg2:        oklch(0.93 0.012 175);
	--ataa-surface:    oklch(1 0 0);
	--ataa-border:     oklch(0.88 0.01  180);
	--ataa-primary:    oklch(0.24 0.10  178);
	--ataa-primary-h:  oklch(0.31 0.11  175);
	--ataa-gold:       oklch(0.70 0.12  74);
	--ataa-gold-pale:  oklch(0.94 0.04  82);
	--ataa-text:       oklch(0.10 0.005 195);
	--ataa-muted:      oklch(0.45 0.02  180);
	--ataa-inv:        oklch(0.97 0 0);
	--ataa-hero:       oklch(0.18 0.09  180);
	--ataa-hero2:      oklch(0.12 0.06  180);
	--ataa-progress:   oklch(0.52 0.12  175);
	--ataa-btn-bg:     oklch(0.24 0.10  178);
	--ataa-btn-text:   oklch(0.97 0 0);
	--ataa-r:          8px;
	--ataa-rb:         6px;
}

/* ═══════════════════════════════════════════════════════
   DIRECTION 3: الحضارة — Hadara (Dark)
═══════════════════════════════════════════════════════ */
[data-ataa-dir="hadara"] {
	--ataa-bg:         oklch(0.13 0.04  163);
	--ataa-bg2:        oklch(0.17 0.05  163);
	--ataa-surface:    oklch(0.19 0.05  163);
	--ataa-border:     oklch(0.28 0.06  163);
	--ataa-primary:    oklch(0.60 0.14  172);
	--ataa-primary-h:  oklch(0.68 0.13  170);
	--ataa-gold:       oklch(0.76 0.12  78);
	--ataa-gold-pale:  oklch(0.24 0.07  163);
	--ataa-text:       oklch(0.92 0.018 84);
	--ataa-muted:      oklch(0.65 0.04  170);
	--ataa-inv:        oklch(0.92 0.018 84);
	--ataa-hero:       oklch(0.10 0.035 165);
	--ataa-hero2:      oklch(0.07 0.025 165);
	--ataa-progress:   oklch(0.76 0.12  78);
	--ataa-btn-bg:     oklch(0.76 0.12  78);
	--ataa-btn-text:   oklch(0.13 0.04  163);
	--ataa-r:          20px;
	--ataa-rb:         14px;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
═══════════════════════════════════════════════════════ */
:root {
	/* Arabic-first font stack */
	--ataa-font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
	--ataa-font-body:    'Tajawal', 'Segoe UI', system-ui, sans-serif;
	--ataa-font-mono:    'Courier New', monospace;

	/* Scale */
	--ataa-text-xs:   0.75rem;    /* 12px */
	--ataa-text-sm:   0.875rem;   /* 14px */
	--ataa-text-base: 1rem;       /* 16px */
	--ataa-text-lg:   1.125rem;   /* 18px */
	--ataa-text-xl:   1.25rem;    /* 20px */
	--ataa-text-2xl:  1.5rem;     /* 24px */
	--ataa-text-3xl:  1.875rem;   /* 30px */
	--ataa-text-4xl:  2.25rem;    /* 36px */
	--ataa-text-5xl:  3rem;       /* 48px */
	--ataa-text-6xl:  clamp(2.5rem, 5.5vw, 5.2rem);

	/* Line heights */
	--ataa-lh-tight:  1.2;
	--ataa-lh-snug:   1.4;
	--ataa-lh-normal: 1.7;
	--ataa-lh-loose:  1.9;

	/* Spacing scale */
	--ataa-space-1:   0.25rem;
	--ataa-space-2:   0.5rem;
	--ataa-space-3:   0.75rem;
	--ataa-space-4:   1rem;
	--ataa-space-5:   1.25rem;
	--ataa-space-6:   1.5rem;
	--ataa-space-8:   2rem;
	--ataa-space-10:  2.5rem;
	--ataa-space-12:  3rem;
	--ataa-space-16:  4rem;
	--ataa-space-20:  5rem;
	--ataa-space-24:  6rem;

	/* Section rhythm */
	--ataa-section-py: clamp(4rem, 8vw, 6.5rem);

	/* Container */
	--ataa-container-max: 1280px;
	--ataa-container-px:  clamp(1.25rem, 4vw, 3rem);

	/* Transitions */
	--ataa-transition:   all 0.18s ease;
	--ataa-transition-slow: all 0.35s ease;

	/* Z-index scale */
	--ataa-z-base:      1;
	--ataa-z-above:     10;
	--ataa-z-nav:       100;
	--ataa-z-modal:     200;
	--ataa-z-toast:     300;
}

/* ═══════════════════════════════════════════════════════
   BREAKPOINTS (used as design reference — media queries
   in component files, not here)
   sm:  480px
   md:  768px
   lg:  1024px
   xl:  1280px
═══════════════════════════════════════════════════════ */