/* ==========================================================================
   Falah Wave — design tokens
   The ONLY file in this project permitted to contain colour literals.
   Source: docs/design-system.md §2, §3.2, §4.1–4.6, §5
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --fw-paprika:        #B4482A;
  --fw-paprika-hover:  #9C3D22;
  --fw-paprika-active: #83321B;
  --fw-paprika-light:  #D9773F;  /* ONLY on dark backgrounds */
  --fw-paprika-tint:   rgba(180, 72, 42, 0.08);

  --fw-olive:          #5A6B41;
  --fw-olive-hover:    #4B5A36;
  --fw-olive-tint:     rgba(90, 107, 65, 0.10);

  --fw-saffron:        #C98A21;  /* decorative on light; text-safe on dark */
  --fw-saffron-hover:  #B0761A;
  --fw-saffron-text:   #8A5C0F;  /* when saffron must carry text on cream */
  --fw-saffron-tint:   rgba(201, 138, 33, 0.12);

  /* ---- Ink (warm neutrals) ---- */
  --fw-ink-900: #1C1815;
  --fw-ink-800: #332C26;
  --fw-ink-700: #4A423B;
  --fw-ink-500: #6B6055;
  --fw-ink-400: #8A7C6B;  /* LARGE TEXT / non-text only — 3.6:1 */
  --fw-ink-300: #B5A897;

  /* ---- Surfaces ---- */
  --fw-cream:        #F7F2E8;
  --fw-cream-raised: #FFFDF8;
  --fw-sand-100:     #F1EADC;
  --fw-sand-200:     #EDE4D3;
  --fw-sand-300:     #E5D9C2;

  /* ---- Lines ---- */
  --fw-line-soft:   rgba(28, 24, 21, 0.10);
  --fw-line:        rgba(28, 24, 21, 0.18);
  --fw-line-strong: rgba(28, 24, 21, 0.35);

  --fw-line-dark-soft:   rgba(247, 242, 232, 0.12);
  --fw-line-dark:        rgba(247, 242, 232, 0.22);
  --fw-line-dark-strong: rgba(247, 242, 232, 0.40);
  --fw-on-dark:          #F7F2E8;
  --fw-on-dark-muted:    rgba(247, 242, 232, 0.65);
  --fw-on-dark-faint:    rgba(247, 242, 232, 0.45);  /* 4.2:1 on espresso — non-text only */
  --fw-on-dark-fill:     rgba(247, 242, 232, 0.06);  /* chip / ghost-button fill on dark */

  /* ---- Semantic ---- */
  --fw-success:      #5A6B41;
  --fw-warning-text: #8A5C0F;
  --fw-warning-bg:   rgba(201, 138, 33, 0.12);
  --fw-danger:       #B3261E;
  --fw-danger-bg:    rgba(179, 38, 30, 0.08);
  --fw-focus:        #1C1815;

  /* ---- Type families ---- */
  --fw-font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fw-font-sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-font-ar:    "IBM Plex Sans Arabic", "Tajawal", "Noto Sans Arabic", sans-serif;
  --fw-font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (fluid) ---- */
  --fw-text-display: clamp(2.75rem, 1.55rem + 4.4vw, 5rem);
  --fw-text-h1:      clamp(2.25rem, 1.45rem + 3.0vw, 3.75rem);
  --fw-text-h2:      clamp(1.875rem, 1.35rem + 1.9vw, 3rem);
  --fw-text-h3:      clamp(1.5rem, 1.28rem + 0.85vw, 2rem);
  --fw-text-h4:      clamp(1.25rem, 1.16rem + 0.35vw, 1.5rem);
  --fw-text-lead:    clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fw-text-body:    1.0625rem;
  --fw-text-sm:      0.9375rem;
  --fw-text-xs:      0.8125rem;

  /* ---- Space (4px base) ---- */
  --fw-space-1: 0.25rem;
  --fw-space-2: 0.5rem;
  --fw-space-3: 0.75rem;
  --fw-space-4: 1rem;
  --fw-space-5: 1.5rem;
  --fw-space-6: 2rem;
  --fw-space-7: 3rem;
  --fw-space-8: 4rem;
  --fw-space-9: 6rem;
  --fw-space-10: 8rem;

  /* ---- Layout ---- */
  --fw-container:      1200px;
  --fw-container-wide: 1440px;
  --fw-gutter: clamp(1.25rem, 4vw, 4rem);
  --fw-section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Radii, borders, elevation ---- */
  --fw-radius-control: 2px;
  --fw-radius-card:    0;
  --fw-border:         1px;
  --fw-accent-bar:     5px;
  --fw-edge-marker:    14px;
  --fw-shadow-nav:     0 1px 0 rgba(28, 24, 21, 0.10);
  --fw-shadow-overlay: 0 24px 48px -16px rgba(28, 24, 21, 0.28);

  /* ---- Motion ---- */
  --fw-dur-fast: 120ms;
  --fw-dur-base: 200ms;
  --fw-dur-slow: 320ms;
  --fw-ease:     cubic-bezier(0.2, 0, 0, 1);
  --fw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Chrome ---- */
  --fw-nav-h: 64px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --fw-nav-h: 76px; }
}