/* ==========================================================================
   Webfonts — Khaled & Yasmin Wedding
   Rouge Script  → romantic display script (names, flourishes)
   Red Hat Display → headings & display sans
   Inter          → body copy & UI
   Geist Mono     → labels, dates, meta (the "invitation stamp" voice)
   ========================================================================== */

@font-face {
  font-family: "Rouge Script";
  src: url("/assets/fonts/rouge-script-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/assets/fonts/red-hat-display-variable-300-900.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/assets/fonts/red-hat-display-variable-300-900-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable-100-900-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-variable-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Colors — Khaled & Yasmin Wedding
   Base palette from the couple's chosen swatch card (colours.pdf):
     FDFDFD off-white · ACCEF2 sky blue · 82A3A1 sage teal
     9FC490 garden green · CCDEA0 chartreuse
   Extended with a deep evergreen ink for text and a warm brass accent
   drawn from the celebration photography (gold ties, candlelight).
   ========================================================================== */

:root {
  /* ---- Brand base palette (from colours.pdf) ---- */
  --paper: #fdfdfd;          /* primary background — soft off-white       */
  --sky: #accef2;            /* sky blue — airy accents, links            */
  --sage: #82a3a1;           /* sage teal — secondary, muted UI           */
  --garden: #9fc490;         /* garden green — primary botanical accent   */
  --chartreuse: #ccdea0;     /* chartreuse — light fills, highlights      */

  /* ---- Extended neutrals (evergreen-tinted, not pure grey) ---- */
  --ink: #1f2e2a;            /* darkest — headings on paper               */
  --ink-soft: #35473f;       /* body text                                 */
  --ink-muted: #5f6f66;      /* captions, meta                            */
  --line: #dfe7dc;           /* hairline borders                          */
  --mist: #f0f4ec;           /* tinted surface / section wash             */
  --cloud: #e7eee2;          /* deeper tinted surface                     */

  /* ---- Warm accent (from photography — brass / candlelight) ---- */
  --brass: #c79a52;          /* metallic warm accent, dividers, RSVP glow */
  --brass-deep: #a67c38;

  /* ---- Tint ramps for washes ---- */
  --garden-050: #f2f7ee;
  --garden-100: #e4efdc;
  --garden-200: #cbe0bd;
  --sage-050: #eef3f2;
  --sage-100: #dce8e6;
  --sky-050: #eef5fd;
  --sky-100: #dcebfb;

  /* ---- Semantic aliases ---- */
  --bg-page: var(--paper);
  --bg-wash: var(--mist);
  --bg-wash-deep: var(--cloud);
  --surface-card: #ffffff;
  --surface-inverse: var(--ink);

  --text-heading: var(--ink);
  --text-body: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --text-on-dark: var(--paper);
  --text-on-accent: #ffffff;

  --border-hairline: var(--line);
  --border-strong: var(--sage);

  --accent-primary: var(--garden);
  --accent-secondary: var(--sage);
  --accent-air: var(--sky);
  --accent-warm: var(--brass);

  --link: #6f9ab8;           /* deepened sky for AA contrast on paper     */
  --link-hover: var(--ink);

  --focus-ring: color-mix(in srgb, var(--sage) 60%, transparent);

  /* ---- Status (soft, wedding-appropriate) ---- */
  --success: #6fa368;        /* "Joyfully accepts"                        */
  --success-bg: var(--garden-100);
  --regret: #b08968;         /* "Regretfully declines"                    */
  --regret-bg: #f3ece2;
}

/* ==========================================================================
   Typography scale — Khaled & Yasmin Wedding
   ========================================================================== */

:root {
  /* ---- Families ---- */
  --font-script: "Rouge Script", "Snell Roundhand", cursive;   /* names, flourishes */
  --font-display: "Red Hat Display", "Segoe UI", sans-serif;   /* headings          */
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;     /* body & UI         */
  --font-mono: "Geist Mono", ui-monospace, monospace;          /* labels, dates     */

  /* ---- Fluid display sizes ---- */
  --fs-script-hero: clamp(4.5rem, 12vw, 9rem);   /* @kind font */ /* the couple's names */
  --fs-script-lg: clamp(3rem, 7vw, 5rem);        /* @kind font */
  --fs-script-md: 2.5rem;                         /* @kind font */

  --fs-display-1: clamp(2.5rem, 5vw, 4rem);      /* @kind font */ /* section headers */
  --fs-display-2: clamp(2rem, 3.5vw, 2.75rem);   /* @kind font */
  --fs-h1: 2.25rem;                               /* @kind font */
  --fs-h2: 1.625rem;                              /* @kind font */
  --fs-h3: 1.25rem;                               /* @kind font */

  /* ---- Body ---- */
  --fs-lead: 1.25rem;                             /* @kind font */
  --fs-body: 1.0625rem;                           /* @kind font */
  --fs-small: 0.9375rem;                          /* @kind font */

  /* ---- Mono / eyebrow labels ---- */
  --fs-label: 0.8125rem;     /* @kind font */ /* uppercase tracked labels */
  --fs-meta: 0.75rem;        /* @kind font */

  /* ---- Weights ---- */
  --fw-light: 300;           /* @kind font */
  --fw-regular: 400;         /* @kind font */
  --fw-medium: 500;          /* @kind font */
  --fw-semibold: 600;        /* @kind font */
  --fw-bold: 700;            /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight: 1.08;          /* @kind font */
  --lh-heading: 1.18;        /* @kind font */
  --lh-body: 1.65;           /* @kind font */

  /* ---- Tracking ---- */
  --track-label: 0.22em;     /* @kind font */ /* engraved eyebrow labels */
  --track-tight: -0.02em;    /* @kind font */
  --track-normal: 0;         /* @kind font */
}

/* ==========================================================================
   Spacing, radii, shadows, motion — Khaled & Yasmin Wedding
   ========================================================================== */

:root {
  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Layout ---- */
  --content-max: 1160px;
  --measure: 62ch;           /* comfortable reading width                 */
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */
  --section-y: clamp(64px, 10vw, 128px); /* @kind spacing */

  /* ---- Radii — soft, generous, garden-organic ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 20px 20px;  /* the "chapel arch" motif       */

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadows — low, warm, diffuse (never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(31, 46, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(31, 46, 42, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(31, 46, 42, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(31, 46, 42, 0.28);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion — gentle, unhurried ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 260ms; /* @kind other */
  --dur-slow: 600ms; /* @kind other */
}