/* =========================================================================
   Trouwen: design tokens (single source of truth)
   Copy to src/Trouwen.Web/wwwroot/css/tokens.css. Change values ONLY here.
   ========================================================================= */

/* Three self-hosted families, each with one job (design system §3).
   Moon Flower Bold (Denise Bentulan) is free for personal use only: see fonts/LICENSE-moonflower.txt. */
@font-face {
  font-family: "Allison";
  src: url("../fonts/allison-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefin-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Moonflower";
  src: url("../fonts/moonflower-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Palette (raw, use only inside this file), taken from the printed invitation ---- */
  --c-cream:       #F3EDE2;   /* recycled paper: page background */
  --c-paper:       #FAF6EE;
  --c-oat:         #E9DFCD;   /* light kraft: bands, dividers */
  --c-kraft:       #B39C7E;   /* envelope: decorative only */
  --c-butter:      #F2DCA2;   /* envelope liner: decorative, or large text on sage */
  --c-gold:        #9E7A30;   /* script names and large display only (3.4:1) */
  --c-gold-deep:   #7F5F24;   /* links, accents (5.1:1 on cream) */
  --c-foil-warm:   #B8933F;   /* gold foil: the lit top edge */
  --c-foil-light:  #E2C67E;   /* gold foil: the edge of the reflection */
  --c-foil-glint:  #FBF1D2;   /* gold foil: the brightest point of the reflection */
  --c-sage:        #7A8262;   /* stationery card; paper text only when large (3.8:1) */
  --c-sage-light:  #A4AB8C;   /* botanical, decorative only */
  --c-sage-deep:   #5A6247;   /* primary button, success (5.5:1) */
  --c-terracotta:  #C98E70;   /* stationery card */
  --c-terracotta-ink: #4A2618; /* text on terracotta (4.8:1) */
  --c-coneflower:  #D9774B;   /* flower illustration only */
  --c-cornflower:  #6F86B8;   /* flower illustration only */
  --c-ink:         #3A2E26;
  --c-muted:       #6A5D52;   /* 5.5:1 on cream, 4.8:1 on oat */
  --c-rose-deep:   #9A4A3C;

  /* ---- Semantic colours (use these in components) ---- */
  --color-bg:            var(--c-cream);
  --color-surface:       var(--c-paper);
  --color-band:          var(--c-oat);
  --color-text:          var(--c-ink);
  --color-text-muted:    var(--c-muted);
  --color-text-inverse:  var(--c-paper);
  --color-accent:        var(--c-gold-deep);
  --color-script:        var(--c-gold);
  --color-ornament:      var(--c-gold);
  --color-botanical:     var(--c-sage-light);
  --color-success:       var(--c-sage-deep);
  --color-error:         var(--c-rose-deep);
  --color-line:          color-mix(in srgb, var(--c-oat) 80%, var(--c-ink) 8%);
  --color-line-strong:   color-mix(in srgb, var(--c-ink) 22%, transparent);
  --color-primary:       var(--c-sage-deep);
  --color-primary-hover: color-mix(in srgb, var(--c-sage-deep) 82%, var(--c-ink));
  --color-field-bg:      var(--c-paper);
  --color-field-border:  color-mix(in srgb, var(--c-ink) 18%, transparent);
  --color-selected-bg:   color-mix(in srgb, var(--c-gold) 14%, var(--c-paper));

  /* Stationery cards (the invitation's coloured inserts) */
  --color-card-sage:            var(--c-sage);
  --color-card-sage-text:       var(--c-paper);
  --color-card-sage-title:      var(--c-butter);
  --color-card-terracotta:      var(--c-terracotta);
  --color-card-terracotta-text: var(--c-terracotta-ink);
  --color-envelope:             var(--c-kraft);
  --color-envelope-liner:       var(--c-butter);
  --color-flower-petal:         var(--c-coneflower);
  --color-flower-blue:          var(--c-cornflower);

  /* Gold foil (`.foil`): a metal base, plus a narrow reflection that sweeps across (`.foil--shine`) */
  --foil-base:   linear-gradient(170deg, var(--c-foil-warm) 0%, var(--c-gold) 48%, var(--c-gold-deep) 100%);
  --foil-glint:  linear-gradient(105deg, transparent 38%, var(--c-foil-light) 46%, var(--c-foil-glint) 50%, var(--c-foil-light) 54%, transparent 62%);
  --foil-emboss: 0 1px 0 rgb(255 250 235 / 0.55);   /* the paper pressed up around the foil */

  /* Recycled-paper grain: tiny warm specks, never a pattern you notice */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .24 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");

  --overlay-photo: linear-gradient(180deg, rgb(58 46 38 / 0.10) 0%, rgb(58 46 38 / 0.38) 100%);
  --overlay-dim:   rgb(58 46 38 / 0.32);

  /* ---- Typography ---- */
  --font-script:  "Allison", "Segoe Script", cursive;                         /* names only */
  --font-display: "Moonflower", "Arial Narrow", sans-serif;       /* headings, in capitals */
  --font-body:    "Josefin Sans", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --fs-script: clamp(4.5rem, 2.75rem + 6vw, 8rem);   /* Allison is small on its body: set it big */
  --fs-hero:  clamp(3.25rem, 2rem + 6vw, 7.5rem);
  --fs-brand: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* the names in the header and menu bar */
  --fs-countdown: clamp(2.25rem, 1.3rem + 5vw, 4.5rem);
  --fs-h1:    clamp(3rem, 2.2rem + 3.6vw, 5.25rem);
  --fs-h2:    clamp(2.5rem, 2rem + 2.2vw, 4rem);
  --fs-h3:    clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);
  --fs-h4:    clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-lead:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

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

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --tracking-display: 0.04em;
  --tracking-date: 0.14em;
  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.06em;

  --measure: 62ch;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-9: 6rem;     /*  96px */
  --space-10: 8rem;    /* 128px */
  --space-11: 10rem;   /* 160px */

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section-pad: clamp(var(--space-8), 6vw, var(--space-10));

  /* ---- Layout ---- */
  --container: 70rem;        /* 1120px */
  --container-wide: 80rem;   /* 1280px */
  --container-narrow: 36rem; /* stepper, forms */
  --header-h: 4.5rem;
  --tap-min: 2.75rem;        /* 44px */
  --tap-lg: 3.5rem;          /* large button (the stepper action bar) */

  /* ---- Shape & depth ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-xs: 3px;
  --radius-arch: 50% 50% var(--radius-md) var(--radius-md) / 32% 32% var(--radius-md) var(--radius-md); /* legacy */
  /* Stationery half-arch: one corner swept into a long, slightly uneven curve; the other three softly
     rounded, each a little different, like paper cut by hand (the invitation's inserts) */
  --radius-arch-start: 74% 9% 7% 12% / 40% 6% 5% 9%;
  --radius-arch-end:   9% 74% 12% 7% / 6% 40% 9% 5%;
  /* Its pen-line outline: close to the card's shape, never the same */
  --radius-arch-start-alt: 68% 12% 9% 9% / 44% 8% 7% 6%;
  --radius-arch-end-alt:   12% 68% 9% 9% / 8% 44% 6% 7%;
  --radius-organic: 58% 42% 47% 53% / 44% 41% 59% 56%; /* pebble: featured images, decorative frames */
  --radius-organic-alt: 46% 54% 56% 44% / 40% 47% 53% 60%; /* its hand-drawn outline: close, never identical */

  --shadow-soft: 0 1px 2px rgb(58 46 38 / 0.04), 0 12px 40px -12px rgb(92 64 44 / 0.18);
  --shadow-paper: 0 1px 1px rgb(58 46 38 / 0.06), 0 6px 18px -8px rgb(92 64 44 / 0.22); /* stationery lying on stationery */
  --focus-ring: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-gold-deep);
  --blur-glass: 10px;
  --line-progress: 2px;

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-flow: cubic-bezier(.65, 0, .35, 1);
  --dur-quick: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --dur-hero: 2400ms;
  --rise: 14px;
  --stagger: 70ms;
  --dur-envelope: 1400ms;
  --dur-foil: 7000ms;       /* one reflection, then the card "rests" */

  /* ---- Layers ---- */
  --z-header: 50;
  --z-overlay: 80;
  --z-toast: 90;
  --z-dialog: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-hero: 1ms;
    --dur-envelope: 1ms;
    --rise: 0px;
    --stagger: 0ms;
  }
}