/* ==========================================================================
   Design tokens — single source of truth for the invitation's visual system.
   Nothing below this file should hard-code a colour, size or duration.
   ========================================================================== */

:root {
  /* --- Brand palette -----------------------------------------------------
     #df005f  titles          #fc8334  body & secondary      #f9b233  accents
     Backgrounds: #fdeae3 soft · #fff6de content · #df005f closing band    */
  --color-primary: #df005f;
  --color-secondary: #fc8334;
  --color-accent: #f9b233;
  --color-ink: #5b3a24;

  --color-page: #f3ece6;
  --color-surface: #fff6de;
  --color-surface-soft: #fdeae3;
  --color-surface-warm: #ffe5c5;
  --color-surface-alt: #fffaec;
  --color-paper: #fffdf7;
  --color-envelope-flap: #fdd7ab;

  --color-on-primary: #fff6de;

  /* Tints derived from the palette — kept here so opacity stays consistent */
  --color-ink-70: rgb(91 58 36 / 0.7);
  --color-ink-80: rgb(91 58 36 / 0.8);
  --color-ink-14: rgb(91 58 36 / 0.14);

  /* Lightbox ground. Fully opaque so the page behind it stops competing with
     the photo; warm dark rather than a flat black. Drop the alpha to around
     0.94 if the page should stay faintly visible behind an open photo. */
  --color-scrim: rgb(51 32 20);
  --color-primary-40: rgb(223 0 95 / 0.4);
  --color-primary-30: rgb(223 0 95 / 0.3);
  --color-primary-25: rgb(223 0 95 / 0.25);
  --color-primary-50: rgb(223 0 95 / 0.5);
  --color-secondary-80: rgb(252 131 52 / 0.8);
  --color-secondary-45: rgb(252 131 52 / 0.45);
  --color-secondary-40: rgb(252 131 52 / 0.4);
  --color-cream-90: rgb(255 246 222 / 0.9);
  --color-cream-40: rgb(255 246 222 / 0.4);
  --color-cream-12: rgb(255 246 222 / 0.12);

  --shadow-card: 0 0 0 1px rgb(223 0 95 / 0.1), 0 24px 60px rgb(91 58 36 / 0.14);
  --shadow-envelope: 0 14px 34px rgb(223 0 95 / 0.16);
  --shadow-polaroid: 0 8px 20px rgb(91 58 36 / 0.16);

  /* --- Typography -------------------------------------------------------- */
  --font-body: "Bitter", Georgia, "Times New Roman", serif;
  --font-script: "MonteCarlo", "Snell Roundhand", cursive;

  --text-2xs: 0.5938rem;
  /*  9.5px — wireframe notes                */
  --text-xs: 0.6563rem;
  /* 10.5px — captions, addresses            */
  --text-sm: 0.75rem;
  /* 11px   — labels, buttons                */
  --text-base: 0.8125rem;
  /* 13px   — body                           */
  --text-md: 0.9375rem;
  /* 15px   — emphasised body                */
  --text-lg: 1.0625rem;
  /* 17px   — venue / time                   */
  --text-xl: 1.375rem;
  /* 22px   — section closing statement      */
  --text-2xl: 2rem;
  /* 24px   — section titles                 */
  --text-3xl: 2.375rem;
  /* 30px   — page title                     */
  --text-script-md: 1.875rem;
  /* 30px — script on cards              */
  --text-script-lg: 3.125rem;
  /* 34px — script subtitles             */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.16em;
  --tracking-wider: 0.18em;

  --leading-tight: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.7;

  /* --- Spacing scale ------------------------------------------------------ */
  --space-3xs: 0.25rem;
  /*  4px */
  --space-2xs: 0.375rem;
  /*  6px */
  --space-xs: 0.5rem;
  /*  8px */
  --space-sm: 0.75rem;
  /* 12px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.375rem;
  /* 22px */
  --space-xl: 1.625rem;
  /* 26px */
  --space-2xl: 2.25rem;
  /* 36px */
  --space-3xl: 3.5rem;
  /* 56px */

  /* --- Layout ------------------------------------------------------------- */
  --invitation-width: 430px;
  --legend-width: 262px;
  --legend-breakpoint: 900px;
  --section-padding-block: var(--space-3xl);
  --section-padding-inline: var(--space-xl);

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* --- Motion -------------------------------------------------------------
     Durations and easings named after the moment they belong to, so the
     animation spec in the wireframe notes stays traceable in the code.     */
  --duration-fast: 200ms;
  --duration-flip: 600ms;
  --duration-reveal: 700ms;
  --duration-fade: 400ms;
  --duration-pulse: 2400ms;

  --ease-rise: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-flip: cubic-bezier(0.4, 0, 0.2, 1);

  --reveal-offset: 22px;
  --reveal-threshold: 0.18;

  /* --- Illustration aspect ratios (from each SVG's viewBox) --------------- */
  --ratio-names: 741 / 141;
  --ratio-date: 433 / 55;
  --ratio-script: 672 / 144;
  --ratio-temple: 780 / 386;
  --ratio-place: 218 / 58;
  --ratio-hotel: 780 / 386;
  --ratio-banner: 811 / 458;
  --ratio-share: 709 / 788;
  --ratio-closing: 478 / 623;
}