/* ============================================================
   Barbara & Timothée — Wedding Design System
   Design tokens: fonts · colors · typography · spacing · base.
   Adapted from the design-system bundle for the production site.
   ============================================================ */

/* ============================================================
   @font-face — self-hosted webfonts (latin subset, woff2)
   Cormorant Garamond · Jost · Parisienne
   ============================================================ */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/cormorant-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/cormorant-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/jost-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jost-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/jost-600.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/jost-700.woff2") format("woff2");
}
@font-face {
  font-family: "Parisienne";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/parisienne-400.woff2") format("woff2");
}

:root {
  /* ============================================================
     COLORS — "Champêtre" watercolour palette
     ============================================================ */
  /* —— Bleu / Sky — the wedding van, the shutters (PRIMARY) —— */
  --blue-50:  #f1f6fa;
  --blue-100: #deeaf3;
  --blue-200: #c3d8ea;
  --blue-300: #9fc0dc;
  --blue-400: #7ba6cd;   /* signature van blue */
  --blue-500: #5e8cb8;
  --blue-600: #4a739c;
  --blue-700: #3d5d7e;
  --blue-800: #344c64;
  --blue-900: #2b3c4d;

  /* —— Vert / Sage — eucalyptus & garden foliage (SECONDARY) —— */
  --green-50:  #f4f7ee;
  --green-100: #e6eed6;
  --green-200: #d2deb6;
  --green-300: #b6c98e;
  --green-400: #9bb16a;   /* sunlit leaf */
  --green-500: #7f9651;
  --green-600: #687c42;
  --green-700: #546437;
  --green-800: #44502f;
  --green-900: #374128;

  /* —— Blush / Rose — wildflowers & the bridal bouquet (ACCENT) —— */
  --blush-50:  #fcf3f2;
  --blush-100: #f8e3e3;
  --blush-200: #f1cccd;
  --blush-300: #e6abae;
  --blush-400: #d98a90;   /* dusty rose */
  --blush-500: #c56a74;
  --blush-600: #a9505d;   /* raspberry bouquet */
  --blush-700: #8a414c;

  /* —— Terracotta — château rooftops & flowerpots (WARM) —— */
  --terra-100: #f6e7dc;
  --terra-200: #ecccb6;
  --terra-300: #ddaa8a;
  --terra-400: #cd8d6c;
  --terra-500: #b9714f;
  --terra-600: #9a5a3d;

  /* —— Honey — the string-light glow (HIGHLIGHT) —— */
  --honey-200: #f6e6b4;
  --honey-300: #efd183;
  --honey-400: #e6b955;
  --honey-500: #d49f37;

  /* —— Encre / Ink — the pen-and-ink line work (TEXT) —— */
  --ink-900: #2c3633;
  --ink-800: #3a4744;
  --ink-700: #4d5a56;
  --ink-600: #677470;
  --ink-500: #8a948f;
  --ink-400: #abb2ac;
  --ink-300: #93a09b;

  /* —— Papier / Cream — the watercolour paper (NEUTRAL) —— */
  --paper-0:  #ffffff;
  --paper-50: #fdfbf6;
  --paper-100:#f9f5ec;
  --paper-200:#f2ecdf;
  --paper-300:#e7ddca;
  --paper-400:#d6c8ad;

  /* —— Semantic surfaces —— */
  --surface-page:      var(--paper-50);
  --surface-card:      var(--paper-0);
  --surface-sunken:    var(--paper-100);
  --surface-tinted:    var(--blue-50);
  --surface-tinted-green: var(--green-50);
  --surface-ink:       var(--ink-900);

  /* —— Semantic text —— */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-faint:    var(--ink-500);
  --text-on-ink:   var(--paper-50);
  --text-on-blue:  var(--paper-0);
  --text-accent:   var(--blush-600);
  --text-link:     var(--blue-600);

  /* —— Brand roles —— */
  --brand-primary:    var(--blue-400);
  --brand-primary-deep:var(--blue-600);
  --brand-secondary:  var(--green-400);
  --brand-accent:     var(--blush-400);
  --brand-warm:       var(--terra-400);
  --brand-highlight:  var(--honey-300);

  /* —— Lines & edges —— */
  --border-hairline: var(--paper-300);
  --border-soft:     var(--paper-400);
  --border-ink:      var(--ink-300);
  --border-strong:   var(--ink-700);

  /* —— Feedback —— */
  --status-success: var(--green-500);
  --status-warning: var(--honey-500);
  --status-error:   var(--blush-600);
  --status-info:    var(--blue-500);

  --focus-ring: var(--blue-300);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Cormorant Garamond", "Hoefler Text", Garamond, serif;
  --font-script:  "Parisienne", "Snell Roundhand", cursive;
  --font-sans:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body:    var(--font-sans);

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

  --text-2xs: 0.6875rem;  /* 11px — overline */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: clamp(3.25rem, 6vw, 4.5rem);
  --text-5xl: clamp(4rem, 9vw, 7rem);

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.28em;

  /* ============================================================
     SPACING · RADII · SHADOWS · MOTION · LAYOUT
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:999px;
  --radius-circle:50%;

  --shadow-xs: 0 1px 2px rgba(44, 54, 51, 0.06);
  --shadow-sm: 0 2px 8px rgba(44, 54, 51, 0.07);
  --shadow-md: 0 8px 24px rgba(44, 54, 51, 0.09);
  --shadow-lg: 0 18px 48px rgba(44, 54, 51, 0.12);
  --shadow-glow: 0 0 0 4px rgba(123, 166, 205, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(44, 54, 51, 0.06);

  --border-width: 1px;
  --border-width-2: 2px;

  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 720ms;

  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --gutter:        clamp(1.25rem, 5vw, 4rem);
}