/* KFC Norway: design tokens (single source of truth)
   Source: KFC kiosk and app prototypes in ~/apollo-group (g3-app-core/css/base.css,
   g3-web2/brands.css, g3-web2/handoff/motion.md). Teaser and web both load this file.
   Edit here, then run scripts/sync-brand.sh to copy it into teaser/ and web/. */

@font-face {
  font-family: "Kentucky Fried Stripes";
  src: url("fonts/KentuckyStripes-Bold.woff2") format("woff2"), url("fonts/KentuckyStripes-Bold.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kentucky Fried Sans";
  src: url("fonts/Kentucky-Regular.woff2") format("woff2"), url("fonts/Kentucky-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kentucky Fried Sans";
  src: url("fonts/Kentucky-Light.woff2") format("woff2"), url("fonts/Kentucky-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
/* bold italic display face: glyphs are already bold and slanted, registered as normal
   so the browser never adds synthetic bold or italic. Used for tickers (reads solid at band sizes). */
@font-face {
  font-family: "Kentucky Fried Serif Heavy";
  src: url("fonts/Kentucky-Bold-Italic.woff2") format("woff2"), url("fonts/Kentucky-Bold-Italic.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colour: brand */
  --red: #F5002B;          /* KFC red, from the Colonel logo */
  --red-ink: #B4001F;      /* pressed red, red text on light */
  --red-soft: #FDECEF;
  --red-glow: rgba(245, 0, 43, 0.28);
  --ink: #101010;
  --beige: #F4F1EC;        /* page ground, product tiles */
  --beige-deep: #ECE7DF;   /* hover on beige */
  --muted: #6B665F;
  --white: #FFFFFF;
  --line: #EEEAE4;
  --on-ink-muted: #C9C3B9;
  --green: #1F9D55;        /* status only (open now, success) */
  --green-ink: #1B7A43;
  --green-soft: #E6F3EA;

  /* colour: roles */
  --bg: var(--white);
  --bg-alt: var(--beige);
  --text: var(--ink);
  --text-muted: var(--muted);
  --accent: var(--red);
  --on-accent: var(--white);
  --selection: var(--red);
  --ring: color-mix(in srgb, var(--red) 20%, transparent);
  --ring-on-dark: rgba(255, 255, 255, 0.2);

  /* type: families */
  --f-stripes: "Kentucky Fried Stripes", "Kentucky Fried Sans", system-ui, sans-serif; /* big titles, uppercase by brand */
  --f-serif: "Kentucky Fried Serif Heavy", "Kentucky Fried Sans", system-ui, sans-serif; /* tickers */
  --f-sans: "Kentucky Fried Sans", system-ui, sans-serif; /* product names, prices, buttons */
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* body and UI */

  /* type: fluid scale (390 to 1440) */
  --t-mega: clamp(40px, 0.5rem + 10vw, 168px);  /* teaser headline, hero (fits "VENTETIDEN" at 375) */
  --t-display: clamp(44px, 2rem + 4.6vw, 104px);
  --t-h1: clamp(36px, 1.6rem + 2.8vw, 72px);
  --t-h2: clamp(28px, 1.3rem + 1.6vw, 48px);
  --t-h3: clamp(22px, 1.1rem + 0.6vw, 28px);
  --t-lead: clamp(18px, 1rem + 0.3vw, 21px);
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 11px;     /* the only uppercase UI text */
  --t-ticker: clamp(32px, 1.4rem + 2.4vw, 64px);
  --lh-tight: 0.9;     /* Stripes titles */
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --track-title: -0.005em;
  --track-label: 0.06em;

  /* space (4pt base) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-128: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 8vw, 144px);
  --container: 1320px;
  --container-wide: 1680px;

  /* radius */
  --r-chip: 999px;
  --r-pill: 999px;
  --r-tile: 20px;
  --r-card: 24px;
  --r-media: 26px;     /* product tile on beige */
  --r-sheet: 28px;
  --r-frame: 28px;

  /* sizes */
  --btn-h: 56px;       /* red pill CTA */
  --btn-h-sm: 44px;
  --hit: 44px;

  /* motion (kiosk: playful bounce-settle) */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* app default */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* morphs, entrances */
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* pops, card entrances */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* hover in, release */
  --press: cubic-bezier(0.2, 0, 0, 1);             /* snappy press */
  --wiggle: cubic-bezier(0.34, 1.36, 0.64, 1);     /* bucket drop wiggle, toggles */
  --dur-press: 120ms;
  --dur-fast: 200ms;
  --dur: 260ms;
  --dur-slow: 320ms;
  --dur-drawer: 1100ms;
  --stagger: 45ms;
  --tick-speed: 40;    /* px per second, header ticker (bucket ticker 26) */
  --ticker-tilt: -6deg;
}

::selection { background: var(--selection); color: var(--on-accent); }