/* ==========================================================================
   OMAR & RAGHDA — WEDDING SITE
   Design tokens · v2.0 · "Olive & Oat"
   Single source of truth. Every colour, size and rhythm on the site comes
   from this file. Do not hard-code values in components.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. COLOUR — pressed paper, sage linen, olive wax
     Oat carries the page. Sage carries the envelope and the action. Ink is
     warm olive-black, never pure black. Jute is the only warm accent.
     ---------------------------------------------------------------------- */

  /* Paper — the invitation surface */
  --paper-50:  #FCF8EF;
  --paper-100: #F8F2E6;
  --paper-200: #F2EADC;   /* page background */
  --paper-300: #E8DDCA;
  --paper-400: #D9CBB4;

  /* Linen — the envelope and cloth behind the card */
  --linen-500: #9A9C8B;
  --linen-400: #B4B5A6;
  --linen-300: #C9C9BC;
  --linen-200: #DEDDD2;
  --linen-100: #EFEEE6;

  /* Sage — foliage, primary action */
  --sage-900: #3B4632;
  --sage-800: #4A563D;
  --sage-700: #5D6B4E;   /* primary button · 4.8:1 on paper */
  --sage-600: #6E7B5D;
  --sage-500: #839173;
  --sage-400: #A4AF94;
  --sage-300: #C3CBB6;
  --sage-200: #DDE2D2;
  --sage-100: #EDF0E5;

  /* Moss — wax seal, stems, the deepest foliage */
  --moss-800: #4B553B;
  --moss-700: #5A6647;
  --moss-600: #697553;
  --moss-500: #7C8766;

  /* Ink — type, rules */
  --ink-900:  #2F3227;   /* names, headings · 12.4:1 on paper */
  --ink-800:  #3C4033;   /* body · 10.2:1 */
  --ink-600:  #5E6252;   /* secondary · 5.2:1 */
  --ink-400:  #858876;   /* large text / captions only · 3.0:1 */
  --ink-200:  #B8B6A4;   /* hairlines, disabled */

  /* Jute — twine, woven labels. Decorative; text only at large sizes. */
  --jute-700: #8A6F49;
  --jute-600: #9B7F55;
  --jute-500: #B79A70;
  --jute-400: #CBB38D;
  --jute-300: #DCCBAB;
  --jute-200: #EDE1CC;

  /* Functional (used sparingly, always with an icon or text label) */
  --clay-600: #8F4F3C;   /* errors, regrets · 5.6:1 */
  --clay-500: #A76350;

  /* ---- Semantic aliases: components reference these, not raw tokens */
  --bg:             var(--paper-200);
  --bg-raised:      var(--paper-50);
  --bg-sunken:      var(--paper-300);
  --bg-linen:       var(--linen-200);
  --bg-inverse:     var(--sage-900);

  --text:           var(--ink-800);
  --text-strong:    var(--ink-900);
  --text-muted:     var(--ink-600);
  --text-faint:     var(--ink-400);   /* large text / captions only */
  --text-inverse:   var(--paper-100);
  --text-inverse-muted: var(--sage-300);

  --accent:         var(--sage-700);
  --accent-deep:    var(--sage-800);
  --accent-line:    var(--sage-500);
  --accent-soft:    var(--sage-200);

  --seal:           var(--moss-700);
  --seal-deep:      var(--moss-800);
  --twine:          var(--jute-500);
  --twine-deep:     var(--jute-700);

  --action:         var(--sage-800);
  --action-hover:   var(--sage-900);
  --action-text:    var(--paper-50);

  --line:           rgba(47, 50, 39, 0.16);
  --line-strong:    rgba(47, 50, 39, 0.30);
  --line-inverse:   rgba(248, 242, 230, 0.20);

  --focus:          #3F5A34;
  --danger:         var(--clay-600);

  /* Legacy aliases — keep the current v1 invitation pages intact until the
     v2 rebuild. Remove these once index.html moves to the new tokens. */
  --gold-700: var(--jute-700);
  --gold-600: var(--jute-600);
  --gold-500: var(--jute-500);
  --gold-400: var(--jute-400);
  --gold-200: var(--jute-200);
  --gold-100: var(--paper-100);
  --olive-800: var(--sage-900);
  --olive-700: var(--sage-800);
  --olive-600: var(--sage-700);
  --olive-400: var(--sage-400);
  --night-900: var(--sage-900);
  --night-800: var(--sage-800);
  --night-700: var(--sage-700);
  --night-600: var(--sage-600);

  /* ----------------------------------------------------------------------
     2. TYPOGRAPHY
     Two voices, as in the reference: a copperplate script for the names,
     a high-contrast old-style serif for everything else. Amiri is the
     optional Arabic voice.
     ---------------------------------------------------------------------- */
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  --font-serif:  "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Times New Roman", serif;
  --font-display: var(--font-serif);
  --font-sans:    var(--font-serif);
  --font-arabic:  "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --fs-micro:  0.6875rem;                                           /* 11px */
  --fs-meta:   0.75rem;                                             /* 12px */
  --fs-small:  0.875rem;                                            /* 14px */
  --fs-body:   1.0625rem;                                           /* 17px */
  --fs-lead:   clamp(1.125rem, 0.98rem + 0.55vw, 1.375rem);         /* 18–22px */
  --fs-h3:     clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);           /* 20–26px */
  --fs-h2:     clamp(1.75rem, 1.3rem + 2vw, 2.75rem);               /* 28–44px */
  --fs-h1:     clamp(2.25rem, 1.55rem + 3.5vw, 3.75rem);            /* 36–60px */
  --fs-mega:   clamp(2.75rem, 1.8rem + 4.5vw, 5rem);                /* 44–80px */
  --fs-script: clamp(3.25rem, 2rem + 5.5vw, 5.75rem);               /* 52–92px */

  --lh-script: 0.98;
  --lh-tight:  1.06;
  --lh-snug:   1.32;
  --lh-body:   1.8;

  --track-display: 0.01em;
  --track-label:   0.34em;   /* small caps labels */
  --track-caps:    0.20em;   /* medium uppercase */
  --track-body:    0.005em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ----------------------------------------------------------------------
     3. SPACE — 4px base, 8px rhythm
     ---------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  48px;
  --s-9:  64px;
  --s-10: 80px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 160px;

  /* ----------------------------------------------------------------------
     4. LAYOUT
     ---------------------------------------------------------------------- */
  --w-prose:    32rem;    /* 512px — max reading measure */
  --w-card:     560px;    /* the finished 973 : 1262 plate */
  --w-content:  66rem;    /* 1056px — standard section */
  --w-wide:     76rem;    /* 1216px — grid sections */
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --section-y:  clamp(4.5rem, 9vw, 8rem);

  /* ----------------------------------------------------------------------
     5. SURFACE, TEXTURE & MOTION
     ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 999px;
  --radius-seal: 46% 54% 51% 49% / 52% 47% 53% 48%;

  --shadow-soft:  0 1px 2px rgba(47, 50, 39, 0.06), 0 10px 28px rgba(47, 50, 39, 0.07);
  --shadow-paper: 0 1px 1px rgba(47, 50, 39, 0.07), 0 18px 44px rgba(47, 50, 39, 0.13);
  --shadow-lift:  0 2px 4px rgba(47, 50, 39, 0.08), 0 30px 72px rgba(47, 50, 39, 0.18);
  --shadow-seal:  0 4px 10px rgba(47, 50, 39, 0.26), 0 10px 24px rgba(47, 50, 39, 0.18);

  /* fine paper grain — apply at low opacity, never as a flat fill */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");

  --ease-out:  cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  360ms;
  --dur-slow:  800ms;
}

/* ==========================================================================
   Minimal base layer — safe to import on every page
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text-strong);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

::selection {
  background: var(--sage-200);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}