/* ===========================================================
   Grand Ta'lim — Design Tokens
   One-source-of-truth variables. Change once, propagate everywhere.
   =========================================================== */

:root {
  /* --- Brand --- */
  --brand-50:  #f2f8f4;
  --brand-100: #def0e2;
  --brand-200: #b9dfc1;
  --brand-300: #8dc89a;
  --brand-400: #5cad71;
  --brand-500: #2f8e50;
  --brand-600: #1f6e3d;   /* primary */
  --brand-700: #175733;
  --brand-800: #0f4229;
  --brand-900: #0a2e1d;

  /* --- Accent (warm gold — scholarly, premium, culturally appropriate) --- */
  --gold-50:  #fbf7ee;
  --gold-100: #f4e9ce;
  --gold-200: #e8cf95;
  --gold-300: #d9b460;
  --gold-400: #c89f5c;     /* accent */
  --gold-500: #ae8140;
  --gold-600: #8a6530;

  /* --- Neutrals --- */
  --ink-0:   #ffffff;
  --ink-50:  #fafaf7;       /* off-white page bg */
  --ink-100: #f2f1ec;
  --ink-200: #e5e3dc;
  --ink-300: #cdcbc1;
  --ink-400: #9a988e;
  --ink-500: #6d6b62;
  --ink-600: #4a4842;
  --ink-700: #2f2e2a;
  --ink-800: #1c1b18;
  --ink-900: #0e0d0b;

  /* --- Semantic --- */
  --danger-500: #c73642;
  --warn-500:   #e09f2d;
  --ok-500:     #2f8e50;
  --info-500:   #2e6ca6;

  /* --- Type --- */
  --font-sans: "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Fraunces", "Inter", Georgia, serif;
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  2rem;        /* 32 */
  --fs-3xl:  clamp(2rem, 4vw, 2.75rem);
  --fs-4xl:  clamp(2.5rem, 6vw, 4rem);
  --fs-5xl:  clamp(3rem, 8vw, 5.5rem);

  /* --- Spacing (8pt grid) --- */
  --s-1: 4px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(14,13,11,.04);
  --shadow-sm: 0 2px 6px rgba(14,13,11,.06), 0 1px 2px rgba(14,13,11,.04);
  --shadow-md: 0 8px 24px rgba(14,13,11,.08), 0 2px 6px rgba(14,13,11,.04);
  --shadow-lg: 0 24px 60px rgba(14,13,11,.12), 0 4px 12px rgba(14,13,11,.06);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1360px;
  --nav-h: 72px;
}

@media (prefers-color-scheme: dark) {
  /* keep single light theme for now — can add dark later */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}