/* Papillon Reizen — design tokens
 * Earthen-editorial aesthetic for boutique West-African travel.
 * Primitives → semantic. Never reach for hex in components.
 */

:root {
  color-scheme: light;

  /* ─── Primitives ──────────────────────────────────────────── */
  --cream-50:       #FAF6EE;
  --cream-100:      #F3ECDB;
  --sand-200:       #E8D7B0;
  --sand-300:       #D9C293;

  --ink-900:        #1C1917;
  --ink-700:        #3C3A36;
  --ink-500:        #6B6963;
  --ink-300:        #A8A39B;

  --terracotta-500: #C26B2B;
  --terracotta-600: #B4531A;
  --terracotta-700: #933F10;
  --terracotta-800: #6E2F0C;

  --indigo-400:     #4A7AAE;
  --indigo-500:     #325A85;
  --indigo-700:     #1E3A5F;
  --indigo-900:     #122845;

  --ochre-400:      #D7B15A;
  --ochre-500:      #C89B3C;
  --ochre-600:      #A87E24;

  --leaf-600:       #3E6B4A;
  --clay-500:       #A8563D;

  --rust-500:       #B64724;
  --rust-600:       #8E3518;

  --white:          #FFFFFF;
  --black:          #000000;

  /* ─── Semantic — surfaces & text ──────────────────────────── */
  --color-bg:               var(--cream-50);
  --color-bg-subtle:        var(--cream-100);
  --color-bg-elevated:      var(--white);
  --color-bg-inverse:       var(--ink-900);
  --color-bg-accent:        var(--terracotta-600);
  --color-bg-deep:          var(--indigo-700);

  --color-text:             var(--ink-900);
  --color-text-muted:       var(--ink-500);
  --color-text-soft:        var(--ink-700);
  --color-text-inverse:     var(--cream-50);
  --color-text-on-accent:   var(--cream-50);

  /* ─── Semantic — interactive ──────────────────────────────── */
  --color-accent:           var(--terracotta-700);   /* text-safe on cream (~4.9:1) */
  --color-accent-hover:     var(--terracotta-800);
  --color-accent-surface:   var(--terracotta-600);   /* large blocks / buttons */
  --color-accent-surface-hover: var(--terracotta-700);
  --color-deep:             var(--indigo-700);
  --color-deep-hover:       var(--indigo-900);
  --color-highlight:        var(--ochre-500);

  /* ─── Semantic — structural ──────────────────────────────── */
  --color-border:           color-mix(in srgb, var(--ink-900) 12%, transparent);
  --color-border-strong:    color-mix(in srgb, var(--ink-900) 24%, transparent);
  --color-border-accent:    var(--terracotta-600);

  --color-focus-ring:       var(--indigo-500);

  /* ─── Semantic — status ──────────────────────────────────── */
  --color-success:          var(--leaf-600);
  --color-danger:           var(--rust-600);
  --color-warning:          var(--ochre-600);
  --color-info:             var(--indigo-500);

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", ui-serif, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  --fs-12:    0.75rem;   /* 12 */
  --fs-14:    0.875rem;  /* 14 */
  --fs-16:    1rem;      /* 16 base */
  --fs-18:    1.125rem;  /* 18 */
  --fs-20:    1.25rem;   /* 20 */
  --fs-24:    1.5rem;    /* 24 */
  --fs-30:    1.875rem;  /* 30 */
  --fs-36:    2.25rem;   /* 36 */
  --fs-48:    3rem;      /* 48 */
  --fs-60:    3.75rem;   /* 60 */
  --fs-72:    4.5rem;    /* 72 */

  /* Fluid editorial scale */
  --fs-display-xl: clamp(2.5rem, 4vw + 1rem, 5rem);
  --fs-display-lg: clamp(2rem, 3vw + 1rem, 3.75rem);
  --fs-display-md: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --fs-body-lg:    clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;

  /* ─── Spacing scale (4pt base, 8pt rhythm) ───────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  /* ─── Radii ───────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-sm:       0 1px 2px rgba(28, 25, 23, 0.06),
                     0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-card:     0 1px 2px rgba(28, 25, 23, 0.06),
                     0 8px 24px rgba(28, 25, 23, 0.04);
  --shadow-elevated: 0 2px 4px rgba(28, 25, 23, 0.08),
                     0 16px 40px rgba(28, 25, 23, 0.08);
  --shadow-overlay:  0 24px 80px rgba(28, 25, 23, 0.16);

  /* ─── Motion ──────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-med:     250ms;
  --dur-slow:    400ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Layout ──────────────────────────────────────────────── */
  --container-max:   1200px;
  --container-wide:  1360px;
  --container-prose: 680px;
  --container-pad:   clamp(16px, 4vw, 32px);

  --header-h:        72px;
  --header-h-shrunk: 56px;

  /* ─── z-index scale ──────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  50;
  --z-drawer:  80;
  --z-overlay: 90;
  --z-modal:   100;
  --z-toast:   120;
}

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior:     auto !important;
  }
}