/* ============================================
   مشروع العمر — Design Tokens
   نظام التصميم الموحد
   ============================================ */

/* ===== Fonts ===== */
@font-face {
  font-family: 'GretaArabic';
  src: url('../fonts/ArbFONTS-4_F4.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'GretaArabic';
  src: url('../fonts/4.TTF') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'GretaArabic';
  src: url('../fonts/4_1.TTF') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'GretaArabic';
  src: url('../fonts/4_2.TTF') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'RB';
  src: url('../fonts/ArbFONTS-BR.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RB';
  src: url('../fonts/RB Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Chonburi';
  src: url('../fonts/Chonburi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'CenturyGothic';
  src: url('../fonts/centurygothic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'CenturyGothic';
  src: url('../fonts/centurygothic_bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ===== Brand Colors ===== */
  --color-black: #000000;
  --color-rich-black: #0a0a0a;
  --color-white: #ffffff;
  --color-off-white: #efefef;
  --color-green: #00CC66;
  --color-green-dark: #00a855;
  --color-green-light: #1ee082;
  --color-green-glow: rgba(0, 204, 102, 0.35);

  /* ===== Semantic — Dark theme (default) ===== */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-elevated: #131313;
  --bg-card: #0e0e0e;
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --bg-glass: rgba(255, 255, 255, 0.03);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: rgba(255, 255, 255, 0.50);
  --text-disabled: rgba(255, 255, 255, 0.30);

  --accent: var(--color-green);
  --accent-hover: var(--color-green-light);
  --accent-soft: rgba(0, 204, 102, 0.12);

  /* ===== Typography ===== */
  --font-ar-primary: 'GretaArabic', 'Tajawal', system-ui, sans-serif;
  --font-ar-secondary: 'RB', 'GretaArabic', system-ui, sans-serif;
  --font-en-primary: 'Chonburi', Georgia, serif;
  --font-en-secondary: 'CenturyGothic', 'Inter', system-ui, sans-serif;

  --fs-3xs: 0.6875rem;   /* 11 */
  --fs-2xs: 0.75rem;     /* 12 */
  --fs-xs: 0.8125rem;    /* 13 */
  --fs-sm: 0.9375rem;    /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-md: 1.125rem;     /* 18 */
  --fs-lg: 1.375rem;     /* 22 */
  --fs-xl: 1.75rem;      /* 28 */
  --fs-2xl: 2.25rem;     /* 36 */
  --fs-3xl: 3rem;        /* 48 */
  --fs-4xl: 4rem;        /* 64 */
  --fs-5xl: 5.5rem;      /* 88 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* ===== Spacing (4-pt grid) ===== */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ===== Layout ===== */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ===== Radius ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 32px var(--color-green-glow);
  --shadow-glow-lg: 0 0 80px var(--color-green-glow);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-xslow: 800ms;

  /* ===== Z-index ===== */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ===== Light theme ===== */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(0, 0, 0, 0.02);

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.20);

  --text-primary: #0a0a0a;
  --text-secondary: rgba(0, 0, 0, 0.68);
  --text-tertiary: rgba(0, 0, 0, 0.48);
  --text-disabled: rgba(0, 0, 0, 0.30);

  --accent-soft: rgba(0, 204, 102, 0.10);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}