/* CR!SP tokens — role names from design-dna/kremkanel/tokens.json, values from the approved Foundation.
   Sizes, radii, grid, curves and durations are kremkanel's exact values. */
:root {
  /* colour — flat only, no gradients, no shadows */
  --color-background: #FBF6EC;      /* Liner: greaseproof white (kremkanel vanille) */
  --color-surface-deep: #D71920;    /* Box Red: the dominant surface (kremkanel chocolat) */
  --color-surface: #A00E13;         /* Fryer Red: trays on red (kremkanel canelle); 4.6:1 under Crust */
  --color-surface-espresso: #2B0A08;/* Char: body text on Liner */
  --color-cream: #FFE9C2;           /* Batter: large text on red, CTA fill */
  --color-crust: #F5B94A;           /* flavour code: Golden (kremkanel peach role) */
  --color-pith: #F7F0B5;            /* flavour code: Lemony (kremkanel ice role) */
  --color-grill: #5A2716;           /* flavour code: Grilled */
  --color-accent: #FFD21F;          /* Sticker Yellow: deal stickers + one tilted stamp only */
  --color-swirl-stripe: #C0141B;    /* the darker stripe of the spinning burst on red */

  /* fonts */
  --font-display: "Bowlby One", "Arial Black", sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  /* type scale — kremkanel px at xl, fluid down to phone */
  --type-display-xl: clamp(56px, 8.2vw, 118px);
  --type-display-l: clamp(52px, 6.95vw, 100px);
  --type-display-m: clamp(40px, 5.3vw, 76px);
  --type-display-s: clamp(34px, 4.2vw, 60px);
  --type-price: 32px;
  --type-lead: clamp(22px, 2.2vw, 32px);
  --type-item: clamp(16px, 1.4vw, 20px);
  --type-body: clamp(16px, 1.25vw, 18px);
  --type-label-l: clamp(18px, 1.67vw, 24px);
  --type-label: 16px;
  --type-label-s: 15px;
  --type-button: 14px;
  --tracking-label: 0.15em;

  /* grid */
  --grid-gap: 20px;
  --outer-margin: 40px;
  --card-margin: 20px;

  /* radius — kremkanel frames 30 / cards 20 / inline 18 / stamp 12, plus CR!SP's one big swoosh corner */
  --radius-frame: 30px;
  --radius-card: 20px;
  --radius-inline: 18px;
  --radius-stamp: 12px;
  --radius-swoosh: 120px;

  /* easing — kremkanel house curves (exact) + brars donor eases (exact) */
  --ease-bounce: linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938,1.077 20.4%,1.121,1.149 24.3%,1.163 27%,1.154 29.9%,1.017 43.1%,0.991,0.977 51%,0.975 57.1%,1.003 76.9%,1);
  --ease-bounce-more: linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938,1.092 20.4%,1.145,1.179 24.3%,1.195 27%,1.185 29.9%,1.017 43.1%,0.991,0.977 51%,0.975 57.1%,1.003 76.9%,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quint-inout: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-brars-custom: cubic-bezier(.2,1,.2,1);
  --ease-brars-out: cubic-bezier(.33,0,1,.91);

  --dur-char-drop: 1.2s;
  --dur-logo-groups: 1.5s;
  --dur-loader: 1500ms;
  --dur-spin: 10s;
  --dur-badge-spin: 3s;

  --header-h: 88px;
  --bar-h: 0px;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-bounce: cubic-bezier(0.19,1,0.22,1); --ease-bounce-more: cubic-bezier(0.19,1,0.22,1); }
}
@media (max-width: 1199px) { :root { --outer-margin: 24px; --card-margin: 12px; --grid-gap: 16px; } }
@media (max-width: 767px) {
  :root { --outer-margin: 20px; --card-margin: 10px; --grid-gap: 12px;
          --radius-frame: 16px; --radius-swoosh: 56px; --header-h: 68px; --bar-h: 72px; --type-price: 26px; }
}