/* =====================================================================
   Flowers of Quran — design tokens
   Brand gold & white come straight from the original theme; the flower
   palette adds the colour kids love, tuned to sit beside gold.
   Type: Fredoka (rounded, bubbly headings that echo the logo), Nunito
   (rounded, highly readable body), Luckiest Guy (big celebration moments),
   Playpen Sans (teacher's handwriting), Amiri Quran (Quranic Arabic).
   ===================================================================== */
:root {
  /* Brand gold (original theme values) */
  --gold: #CC9933;
  --gold-dark: #A67B24;
  --gold-deep: #745B0E;
  --gold-border: #E5C568;
  --gold-light: #FDFBF5;
  --gold-glow: rgba(204, 153, 51, 0.22);
  --logo-gold: #C38919;
  --logo-ink: #04040B;      /* the dark diamonds and strokes of the medallion calligraphy */

  /* Gold scale */
  --gold-25: #FFFDF7;
  --gold-50: #FEF8EA;
  --gold-100: #FCF0D3;
  --gold-200: #F7E1AC;
  --gold-300: #EFCF84;
  --gold-400: #E5C568;
  --gold-500: #CC9933;
  --gold-600: #B8862A;
  --gold-700: #A67B24;
  --gold-800: #8A6519;
  --gold-900: #745B0E;
  --gold-950: #473606;

  /* Warm neutrals */
  --ink: #2B2319;
  --ink-2: #5A4C3B;
  --ink-3: #77695F;   /* 4.8:1 on the beige, 5.3:1 on white (WCAG AA) */
  --ink-4: #B3A594;
  --line: #F0E5CC;
  --line-2: #E7D7B4;
  --paper: #FFFFFF;
  --cream: #FFFBF1;
  --cream-2: #FBF3E0;
  --cream-3: #F6EAD0;

  /* Flower palette */
  --rose: #EE6C8E;       --rose-50: #FFF1F5;  --rose-100: #FFDCE6;
  --coral: #FF8A65;      --coral-50: #FFF3EE; --coral-100: #FFE0D4;
  --lilac: #9B7FE6;      --lilac-50: #F5F1FF; --lilac-100: #E8E0FF;
  --sky: #4FA5E6;        --sky-50: #EFF7FF;   --sky-100: #D9EDFF;
  --leaf: #46A06A;       --leaf-dark: #2E7A4B; --leaf-50: #EEF9F2; --leaf-100: #D7F0E0;
  --sun: #FFC53D;        --sun-50: #FFF9E6;   --sun-100: #FFEFBF;

  /* Semantic */
  --ok: #2E9B61;   --ok-bg: #E6F6EC;   --ok-line: #A9DDBD;
  --bad: #D9485F;  --bad-bg: #FDECEF;  --bad-line: #F4B4BF;
  --warn: #D98A1C; --warn-bg: #FFF4DF; --warn-line: #F4D196;
  --info: #3A82D2; --info-bg: #E6F1FF; --info-line: #A9CBF1;
  --focus: #A67B24;

  /* Typography */
  --f-display: "Luckiest Guy", "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-head: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Playpen Sans", "Fredoka", "Comic Sans MS", cursive;
  --f-arabic: "Amiri Quran", "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-xl: clamp(1.55rem, 1.28rem + 1.2vw, 2.15rem);
  --fs-2xl: clamp(1.9rem, 1.4rem + 2.3vw, 3.1rem);
  --fs-3xl: clamp(2.35rem, 1.5rem + 3.9vw, 4.4rem);
  --fs-4xl: clamp(2.8rem, 1.6rem + 5.6vw, 5.8rem);

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* Shadows (warm, gold-tinted) */
  --sh-xs: 0 1px 2px rgba(71, 54, 6, 0.06);
  --sh-sm: 0 2px 6px rgba(71, 54, 6, 0.06), 0 1px 2px rgba(71, 54, 6, 0.05);
  --sh-md: 0 12px 30px -12px rgba(116, 91, 14, 0.24), 0 3px 8px rgba(116, 91, 14, 0.06);
  --sh-lg: 0 28px 60px -20px rgba(116, 91, 14, 0.34), 0 8px 18px -8px rgba(116, 91, 14, 0.1);
  --sh-xl: 0 40px 90px -30px rgba(116, 91, 14, 0.42);
  --sh-gold: 0 14px 30px -10px rgba(204, 153, 51, 0.6);
  --sh-inset: inset 0 2px 0 rgba(255, 255, 255, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  --dur-5: 1100ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(16px, 4.2vw, 32px);
  --section-y: clamp(72px, 10vw, 140px);
  --header-h: 76px;

  /* Layers */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-menu: 90;
  --z-modal: 100;
  --z-toast: 130;
  --z-overlay: 150;
  --z-preloader: 200;

  /* Pattern: eight-point star lattice in gold (Islamic geometric motif) */
  --pattern-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23CC9933' stroke-width='1.2' stroke-opacity='.55'%3E%3Cpath d='M32 14l5.3 12.7L50 32l-12.7 5.3L32 50l-5.3-12.7L14 32l12.7-5.3z'/%3E%3Cpath d='M32 20l3.5 8.5L44 32l-8.5 3.5L32 44l-3.5-8.5L20 32l8.5-3.5z' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0l6 6M64 0l-6 6M0 64l6-6M64 64l-6-6'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-dots: radial-gradient(circle at 1px 1px, rgba(204, 153, 51, 0.28) 1px, transparent 1.5px);

  color-scheme: light;
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}