/* Design tokens for the Clínica Mirai bust page.
   The layout, spacing and motion values follow the "Kin OS" spec one to one; colour and type are Mirai's:
   Espresso ground, Warm Ivory light ground, Sand / Greige secondary ink, Champagne and the logo gold as the
   only accents (no pure black or white, nothing saturated), Fraunces for display and DM Sans for text. */
:root {
  --u: clamp(.85px, 100vw / 1470, 1.3px);   /* one design pixel; design frame 1470 × 956 */

  --s4: calc(var(--u) * 4);  --s8: calc(var(--u) * 8);  --s12: calc(var(--u) * 12); --s16: calc(var(--u) * 16);
  --s24: calc(var(--u) * 24); --s32: calc(var(--u) * 32); --s48: calc(var(--u) * 48); --s72: calc(var(--u) * 72);
  --s120: calc(var(--u) * 120); --s192: calc(var(--u) * 192);

  /* Mirai palette (companies/clinica-mirai/brand/README.md). */
  --ivory: #f3efe8; --sand: #d9cfc1; --greige: #b8aea3; --taupe: #8c8176;
  --wood: #a77c55; --espresso: #332b25; --champagne: #b7a080; --gold: #c7ae66;

  --site: var(--espresso);
  --bg: #2a231e; --panel: #3a312a; --card: #463b33; --control: #5a4c41;

  --glass: rgba(51, 43, 37, .56);
  --glass-light: rgba(243, 239, 232, .08);
  --glass-filter: blur(calc(var(--u) * 24)) saturate(1.3);

  --fill-1: rgba(243, 239, 232, .06);
  --fill-2: rgba(243, 239, 232, .1);
  --fill-3: rgba(243, 239, 232, .16);
  --rule:   rgba(243, 239, 232, .14);
  --chip-blur: blur(calc(var(--u) * 12)) saturate(1.3);

  --l-bg: var(--ivory);
  --l-surface: rgba(247, 244, 239, .82); --l-surface-2: rgba(247, 244, 239, .6);
  --l-ink-1: var(--espresso); --l-ink-2: #6e645b; --l-ink-3: var(--taupe);
  --l-fill-1: rgba(51, 43, 37, .05); --l-fill-2: rgba(51, 43, 37, .09); --l-rule: rgba(51, 43, 37, .1);
  --l-lift: 0 calc(var(--u) * 24) calc(var(--u) * 60) calc(var(--u) * -24) rgba(51, 43, 37, .22);
  --l-glass-filter: blur(calc(var(--u) * 20)) saturate(1.3);

  --ink-1: var(--ivory); --ink-2: var(--sand); --ink-3: var(--greige);

  /* The spec's two accents: its lavender becomes Champagne, its yellow the logo gold. */
  --accent: var(--champagne); --accent-2: var(--gold);

  --grad-golden: linear-gradient(90deg, #b7a080 0%, #c7ae66 55%, #a77c55 100%);

  --font-text:    "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --t-s: calc(var(--u) * 13); --lh-s: 1.3;  --tr-s: 0;
  --t-m: calc(var(--u) * 16); --lh-m: 1.45; --tr-m: -.005em;
  --t-l: calc(var(--u) * 30); --lh-l: 1.12; --tr-l: -.015em;
  --tr-caps: .12em;
  --d-1: min(calc(var(--u) * 176), 12.6vw); --lh-d1: .86;
  --d-2: calc(var(--u) * 56); --lh-d2: 1;

  --r-xs: calc(var(--u) * 6); --r-s: calc(var(--u) * 10); --r-m: calc(var(--u) * 14); --r-l: calc(var(--u) * 20);
  --r-pill: 999px; --btn-h: calc(var(--u) * 44); --gutter: var(--s48);

  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 160ms; --dur-ui: 240ms; --dur-in: 600ms; --stagger: 60ms;
  --in-blur: calc(var(--u) * 12); --in-y: calc(var(--u) * 16); --press: .97;
}
@media (max-width: 767px) {
  :root { --u: calc(100vw / 430); --t-s: max(12px, calc(var(--u) * 13)); --t-m: max(15px, calc(var(--u) * 16));
          --t-l: max(22px, calc(var(--u) * 28)); --d-2: calc(var(--u) * 44); --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-in: 0ms; --stagger: 0ms; --in-blur: 0px; --in-y: 0px; }
}