/* ==========================================================================
   Laura & Gio — Design tokens
   Single source of truth. Every color was sampled from assets/card_body.png
   (the hand-painted save-the-date). Do not add values that are not here.
   Load order: this file, then your component styles.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
/* Cormorant Garamond + EB Garamond are Google Fonts substitutes — see design-system.md §3.
   @import must stay the first rule in this file. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* Playwrite US Trad ships locally (SIL OFL). Adjust the url() to your asset path. */
@font-face {
  font-family: "Playwrite US Trad";
  src: url("../../assets/Playwrite_US_Trad/PlaywriteUSTrad-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ---- Primitive color: paper & ink -------------------------------------- */
  --paper: #fcfbf7;          /* card stock */
  --paper-warm: #f6f0e2;     /* banded sections */
  --paper-shade: #ece4d2;    /* sunk wells, table stripes */
  --ink: #2e2a24;            /* warm graphite. Never use #000 */
  --ink-soft: #6b6355;
  --ink-faint: #a39a88;      /* decorative only — fails 4.5:1 for body text */

  /* ---- Primitive color: the painted inks --------------------------------- */
  /* Base hues are illustration colors. Use -deep variants for any text < 24px. */
  --coral: #d2604e;
  --coral-deep: #b0432f;
  --coral-wash: #f3d9d2;
  --olive: #c5c837;
  --olive-deep: #7e8320;
  --olive-wash: #eef0c8;
  --sun: #f4e52b;
  --sun-deep: #d9c313;
  --marigold: #ebb72a;
  --marigold-deep: #c2900f;
  --pink: #f38999;
  --pink-deep: #d9506e;
  --pink-muted: #a3576b;    /* dusty, AA-safe pink for small bold text */
  --sky: #5d7fa6;
  --thistle: #7e6b8f;
  --peri:#ccccff;
  --peri-deep: #96aaf0;
  --peri-blue: #8D9EC6;
  --leaf: #a7c878;
  --leaf-deep: #5e8a46;
  --meadow: #4a5a3a;         /* deep field green: envelope scene + dark grounds */
  --scene-dark: #2f2e20;     /* under the meadow photo so nothing flashes white */

  /* ---- Primitive color: lines -------------------------------------------- */
  --line: #ddd6c4;
  --line-strong: #c3b99f;

  /* ---- Semantic color (use these in components) -------------------------- */
  --surface-page: var(--paper);
  --surface-band: var(--paper-warm);
  --surface-card: #ffffff;
  --surface-sunk: var(--paper-shade);
  --surface-ink: var(--meadow);

  --text-body: var(--ink);
  --text-heading: var(--coral-deep);
  --text-muted: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --text-accent: var(--olive-deep);
  --text-on-ink: var(--paper);
  --text-link: var(--coral-deep);
  --text-link-hover: var(--coral);
  --text-on-photo-hint: rgba(255, 255, 255, 0.75);

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

  --action-fill: var(--coral-deep);
  --action-fill-hover: var(--coral);
  --action-text: var(--paper);
  --action-quiet-text: var(--coral-deep);
  --action-outline-hover-bg: var(--coral-wash);

  --accent-yes: var(--leaf-deep);   /* "Joyfully accepts" */
  --accent-no: var(--coral-deep);   /* "Regretfully declines" */

  --focus-ring: var(--olive-deep);

  --status-good-bg: var(--olive-wash);
  --status-good-border: var(--olive-deep);
  --status-bad-bg: var(--coral-wash);
  --status-bad-border: var(--coral-deep);
  --status-bad-text: var(--coral-deep);

  --selection-bg: var(--olive-wash);

  /* ---- Typography: families ---------------------------------------------- */
  --font-hand: "Playwrite US Trad", "Snell Roundhand", cursive;   /* names, dates, greetings. >= 18px, <= ~8 words */
  --font-display: "Cormorant Garamond", Georgia, serif;          /* headings, ceremonial caps */
  --font-body: "EB Garamond", Georgia, serif;                    /* running text, UI, labels */

  /* ---- Typography: size scale -------------------------------------------- */
  --text-xs: 0.6875rem;   /* 11px — caps micro-labels only */
  --text-sm: 0.8125rem;   /* 13px */
  --text-sb: 0.9125rem;   /* 13px */
  --text-base: 1.0625rem; /* 17px — body */
  --text-md: 1.1875rem;   /* 19px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4.25rem;    /* 68px */
  --text-5xl: 6rem;       /* 96px */

  /* ---- Typography: weights ----------------------------------------------- */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Typography: leading & tracking ------------------------------------ */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-loose: 1.85;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.18em;       /* every micro-label */
  --tracking-caps-wide: 0.3em;   /* envelope + invitation card only */
  --tracking-footer: 0.14em;

  /* ---- Typography: roles (CSS `font` shorthand) -------------------------- */
  --type-names: var(--weight-extralight) var(--text-4xl)/1.35 var(--font-hand);
  --type-hand-lg: var(--weight-light) var(--text-2xl)/1.45 var(--font-hand);
  --type-hand-sm: var(--weight-regular) var(--text-xl)/1.6 var(--font-hand);
  --type-h1: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-lede: var(--weight-regular) var(--text-md)/var(--leading-loose) var(--font-body);
  --type-caps: var(--weight-semibold) var(--text-xs)/1.4 var(--font-body);          /* + uppercase + --tracking-caps */
  --type-caps-display: var(--weight-medium) var(--text-sm)/1.5 var(--font-display); /* + uppercase + --tracking-caps-wide */

  /* ---- 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;

  --stack-tight: var(--space-3);
  --stack: var(--space-5);
  --stack-loose: var(--space-7);
  --section-gap: var(--space-9);

  /* ---- Layout ------------------------------------------------------------ */
  --gutter: var(--space-5);       /* mobile side padding; becomes --gutter-lg at >= 48rem */
  --gutter-sm: var(--space-5);
  --gutter-lg: var(--space-7);
  --page-max: 68rem;              /* from the source site */
  --page-narrow: 44rem;           /* text-only pages */
  --measure: 34em;                /* paragraph columns and forms */
  --detail-key-col: 9rem;         /* DetailList key column */
  --schedule-label-col: 10.5rem;  /* Schedule day-label column, desktop */
  --schedule-time-col: 6.5rem;    /* Schedule event time column */
  --nav-gap: 2.25rem;             /* desktop nav link spacing */
  --card-aspect: 5 / 7;           /* invitation card */
  --envelope-aspect: 640 / 440;

  /* ---- Radii ------------------------------------------------------------- */
  --radius-0: 0;                  /* form inputs */
  --radius-xs: 2px;               /* buttons, status notes, checkbox */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-card: 18px;            /* Card */
  --radius-pill: 999px;           /* Tag only */
  --radius-deckle: 18px 22px 16px 24px / 22px 16px 24px 18px; /* hand-cut paper */
  --radius-invitation: 7% / 5%;   /* invitation card clip, from source */

  /* ---- Shadows (warm, single-source) ------------------------------------- */
  --shadow-none: none;
  --shadow-lift: 0 1px 2px rgba(46, 42, 36, 0.06);
  --shadow-card: 0 6px 18px -8px rgba(46, 42, 36, 0.22);
  --shadow-raised: 0 14px 34px -14px rgba(46, 42, 36, 0.3);
  --shadow-envelope: 0 25px 60px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 2px rgba(46, 42, 36, 0.1);
  --ring-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus-ring);

  /* ---- Photo scrim (the only permitted gradient) ------------------------- */
  --scrim-photo: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-paper: cubic-bezier(0.65, 0, 0.35, 1);  /* card movement */
  --ease-fold: cubic-bezier(0.6, 0, 0.3, 1);     /* envelope flap */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);    /* UI */
  --steps-stopmotion: steps(6, end);

  --duration-fast: 140ms;          /* color, opacity */
  --duration-base: 220ms;          /* position, shadow */
  --duration-slow: 700ms;          /* reveals */
  --duration-cinematic: 1200ms;    /* card rising out of envelope */
  --duration-flap: 980ms;
  --duration-envelope-exit: 1050ms;
  --stagger: 90ms;
  --reveal-distance: 12px;

  /* ---- Opacity ----------------------------------------------------------- */
  --opacity-disabled: 0.45;
  --opacity-linework: 0.55;        /* allowed range 0.35–0.6 */

  /* ---- Z-index ----------------------------------------------------------- */
  --z-header: 10;
  --z-nav-overlay: 11;
  --z-nav-toggle: 12;
}

/* Desktop gutter */
@media (min-width: 48rem) {
  :root { --gutter: var(--gutter-lg); }
}

/* Reduced motion — required, carried over from the source */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}

/* ---- Bare-element defaults ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--type-body); color: var(--text-body); background: var(--surface-page); }
img { max-width: 100%; display: block; }
h1 { font: var(--type-h1); color: var(--text-heading); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5); }
h2 { font: var(--type-h2); color: var(--text-heading); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
h3 { font: var(--type-h3); color: var(--text-body); margin: 0 0 var(--space-3); }
p  { margin: 0 0 var(--space-4); text-wrap: pretty; }
a  { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }
:is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-7) 0; }
::selection { background: var(--selection-bg); }