/* ==========================================================================
   Future International Nursery: design tokens
   Every colour here is sampled from the official logo (see ../../NOTES.md).
   Do not invent new brand colours; extend from these.
   ========================================================================== */

:root {
  /* ---- Brand: wordmark ------------------------------------------------- */
  --wine: #7D1B3E;
  --wine-deep: #5E1230;
  --wine-dark: #3D0B1F;
  --wine-ink: #2A0714;
  --rose: #CD6F7F;
  --rose-soft: #E9B8C1;

  /* ---- Brand: the fifteen logo blocks ---------------------------------- */
  --b-violet: #503C97;
  --b-lilac: #B28BC0;
  --b-raspberry: #A83561;
  --b-red: #C92239;
  --b-orange: #E96F35;
  --b-amber: #F1C65D;
  --b-yellow: #F9ED06;
  --b-gold: #AE8034;
  --b-lime: #C4D82D;
  --b-green: #00623A;
  --b-blue: #005AA4;
  --b-sky: #0073B2;
  --b-peri: #B1B5DB;
  --b-pink: #F389B2;
  --b-wine: #7D1B3E;

  /* ---- Surfaces --------------------------------------------------------- */
  --cream: #FDF8F4;
  --cream-2: #F7EFE8;
  --cream-3: #F0E4DA;
  --paper: #FFFFFF;
  --ink: #24131A;
  --ink-2: #4A3740;
  --ink-3: #7A6670;
  --line: rgba(125, 27, 62, 0.14);
  --line-soft: rgba(125, 27, 62, 0.07);

  /* semantic surface aliases: sections flip these, components read them */
  --bg: var(--cream);
  --bg-raised: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-3);
  --rule: var(--line);
  --accent: var(--wine);
  --on-accent: #FFFFFF;

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* fluid scale: clamp(min, preferred, max) */
  --t-hero: clamp(2.5rem, 1.55rem + 4.1vw, 5.1rem);
  --t-xxl: clamp(2.25rem, 1.35rem + 4.1vw, 4.5rem);
  --t-xl: clamp(1.85rem, 1.3rem + 2.5vw, 3.15rem);
  --t-lg: clamp(1.4rem, 1.15rem + 1.15vw, 2.1rem);
  --t-md: clamp(1.13rem, 1.04rem + 0.42vw, 1.4rem);
  --t-body: clamp(1rem, 0.97rem + 0.16vw, 1.12rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-label: 0.72rem;

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-head: 1.2;
  --lh-body: 1.68;
  --track-label: 0.16em;

  /* ---- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4rem, 2.8rem + 5.4vw, 7.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --measure: 68ch;
  --wide: 1320px;
  --narrow: 860px;

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;
  --r-blob: 48% 52% 44% 56% / 52% 44% 56% 48%;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(42, 7, 20, 0.05), 0 2px 8px rgba(42, 7, 20, 0.04);
  --sh-2: 0 2px 6px rgba(42, 7, 20, 0.06), 0 10px 26px rgba(42, 7, 20, 0.07);
  --sh-3: 0 4px 12px rgba(42, 7, 20, 0.07), 0 22px 54px rgba(42, 7, 20, 0.11);
  --sh-4: 0 8px 24px rgba(42, 7, 20, 0.1), 0 44px 92px rgba(42, 7, 20, 0.16);
  --sh-glow: 0 18px 60px rgba(125, 27, 62, 0.28);

  /* ---- 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);
  --d-fast: 180ms;
  --d-mid: 380ms;
  --d-slow: 720ms;
  --d-vslow: 1200ms;

  /* ---- Chrome ----------------------------------------------------------- */
  --header-h: 78px;
  --z-canvas: 0;
  --z-content: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-loader: 90;

  color-scheme: light;
}

/* Arabic swaps the type stack; everything else is shared. */
:root:lang(ar),
[dir="rtl"] {
  --font-display: "Cairo", "Noto Kufi Arabic", "Tajawal", "Segoe UI",
    "Geeza Pro", "Arabic Typesetting", sans-serif;
  --font-body: "Cairo", "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma,
    sans-serif;
  /* Arabic sits optically smaller at the same px and has no descender-heavy
     display face here, so it gets a touch more size and line-height. */
  --lh-tight: 1.24;
  --lh-snug: 1.32;
  --lh-head: 1.42;
  --lh-body: 1.95;
  --track-label: 0;
  --t-hero: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem);
  --t-xxl: clamp(2rem, 1.25rem + 3.4vw, 3.9rem);
}

/* Dark sections opt in by class rather than by media query, because the site is a
   single warm light theme with deliberate dark passages. */
.on-dark {
  --bg: var(--wine-ink);
  --bg-raised: rgba(255, 255, 255, 0.05);
  --fg: #FBF3EE;
  --fg-muted: rgba(251, 243, 238, 0.66);
  --rule: rgba(255, 255, 255, 0.14);
  --accent: var(--b-amber);
  --on-accent: var(--wine-ink);
  color-scheme: dark;
}