/* ==========================================================================
   BASMA & ABDELRAHMAN — WEDDING SITE
   Design tokens · v1.0
   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 — "Night Garden"
     Warm paper for the invitation, ink for the type, brass for the light,
     olive for the foliage. Everything else is a tint of these four.
     ---------------------------------------------------------------------- */

  /* Paper — the invitation surface */
  --paper-50:  #FCF9F3;
  --paper-100: #F7F1E7;
  --paper-200: #F1E8DB;   /* page background */
  --paper-300: #E6D9C7;
  --paper-400: #D5C2A9;

  /* Ink — type, rules, line art */
  --ink-900:   #17180F;
  --ink-800:   #2A2C22;
  --ink-600:   #4E5145;
  --ink-400:   #7A7C6E;
  --ink-200:   #B9B6A6;

  /* Night — dark bands, after-sunset sections */
  --night-900: #101208;
  --night-800: #191C11;
  --night-700: #23271A;
  --night-600: #333827;

  /* Olive — foliage, primary action */
  --olive-800: #2B3323;
  --olive-700: #394429;
  --olive-600: #4B583A;
  --olive-400: #7F8F6C;

  /* Brass — candlelight. Accent only, never a large field. */
  --gold-700:  #7A5A28;   /* text-safe brass on paper (5.2:1) */
  --gold-600:  #96702F;
  --gold-500:  #B08A4F;   /* decorative only — rules, ornament (2.6:1) */
  --gold-400:  #C9A876;
  --gold-200:  #E7D6B6;
  --gold-100:  #F3E9D6;

  /* Functional (used sparingly, always with an icon or text label) */
  --clay-600:  #9A4F3A;   /* errors, regrets */

  /* ---- Semantic aliases: components reference these, not the raw tokens */
  --bg:             var(--paper-200);
  --bg-raised:      var(--paper-50);
  --bg-sunken:      var(--paper-300);
  --bg-inverse:     var(--night-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(--gold-200);

  --accent:         var(--gold-700);
  --accent-line:    var(--gold-500);
  --accent-soft:    var(--gold-100);

  --action:         var(--olive-700);
  --action-hover:   var(--olive-800);
  --action-text:    var(--paper-50);

  --line:           rgba(23, 24, 15, 0.14);
  --line-strong:    rgba(23, 24, 15, 0.28);
  --line-inverse:   rgba(247, 241, 231, 0.18);

  --focus:          #2F6B4F;
  --danger:         var(--clay-600);

  /* ----------------------------------------------------------------------
     2. TYPOGRAPHY
     One family, as in the reference invitation: Jost — a Futura-style
     geometric sans. Light weights and wide tracking for the display lines,
     400 for body and forms. Amiri is the optional Arabic voice.
     ---------------------------------------------------------------------- */
  --font-display: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-arabic:  "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --fs-meta:  0.75rem;                                              /* 12px */
  --fs-small: 0.875rem;                                             /* 14px */
  --fs-body:  1rem;                                                 /* 16px */
  --fs-lead:  clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem);          /* 17–20px */
  --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.6rem + 3.6vw, 4rem);                 /* 36–64px */
  --fs-mega:  clamp(1.9rem, 1.2rem + 6vw, 4.75rem);                 /* 30–76px */

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-body:  1.75;

  --track-display: 0.18em;  /* uppercase names — the reference's signature */
  --track-label:   0.3em;   /* small caps labels, nav */
  --track-caps:    0.16em;  /* medium uppercase */
  --track-body:    0.01em;

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

  /* ----------------------------------------------------------------------
     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:    34rem;    /* 544px — max reading measure */
  --w-card:     30rem;    /* 480px — invitation card */
  --w-content:  68rem;    /* 1088px — standard section */
  --w-wide:     78rem;    /* 1248px — grid sections */
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --section-y:  clamp(4rem, 9vw, 8rem);

  /* ----------------------------------------------------------------------
     5. SURFACE & MOTION
     ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(23, 24, 15, 0.05), 0 12px 32px rgba(23, 24, 15, 0.06);
  --shadow-lift: 0 2px 4px rgba(23, 24, 15, 0.06), 0 24px 56px rgba(23, 24, 15, 0.10);

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

/* ==========================================================================
   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-sans);
  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-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: 0.015em;
  color: var(--text-strong);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

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

::selection {
  background: var(--gold-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;
  }
}