/**
 * MyPizzaTeacher design tokens.
 * This is the only stylesheet allowed to contain raw design values.
 */

:root {
  /* Foundations */
  --color-bg: #f4efe5;
  --color-surface: #fffdf8;
  --color-surface-alt: #e7dfd1;
  --color-ink: #191713;

  /* Brand */
  --color-brand: #d64a2f;
  --color-brand-dark: #a82f1d;
  --color-accent: #dfa448;
  --color-basil: #263c32;

  /* Text and status */
  --color-text: #141210;
  --color-text-muted: #6b6157;
  --color-text-invert: #f5ede0;
  --color-focus-on-dark: #ffffff;
  --color-overlay: rgba(20, 18, 16, 0.64);
  --color-header: rgba(245, 237, 224, 0.92);
  --color-disabled: rgba(107, 97, 87, 0.58);
  --color-transparent: transparent;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;
  --font-size-xs: 0.71875rem;
  --font-size-sm: 0.875rem;
  --font-size-body: 1.0625rem;
  --font-size-intro: 1.25rem;
  --font-size-h3: clamp(1.375rem, 2.2vw, 1.625rem);
  --font-size-h2: clamp(1.875rem, 4vw, 3.375rem);
  --font-size-h1: clamp(2.5rem, 5.5vw, 4.75rem);
  --line-height-flat: 1;
  --line-height-tight: 1.05;
  --line-height-heading: 1.15;
  --line-height-subheading: 1.2;
  --line-height-label: 1.4;
  --line-height-small: 1.5;
  --line-height-intro: 1.55;
  --line-height-body: 1.65;
  --letter-spacing-normal: normal;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-subtle: -0.01em;
  --letter-spacing-label: 0.1875rem;
  --text-transform-label: uppercase;
  --measure-body: 70ch;
  --measure-narrow: 52ch;
  --measure-heading: 22ch;
  --measure-hero: 14ch;

  /* Spacing */
  --space-none: 0;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --section-space-desktop: 7.5rem;
  --section-space-mobile: 4.5rem;
  --container-pad-desktop: 2rem;
  --container-pad-tablet: 1.5rem;
  --container-pad-mobile: 1.25rem;
  --control-pad-block: 0.875rem;
  --control-pad-inline: 1.5rem;
  --card-pad: 2rem;
  --grid-gap: 2rem;
  --stack-gap: 1rem;

  /* Dimensions */
  --size-full: 100%;
  --size-auto: auto;
  --container-max: 80rem;
  --touch-min: 2.75rem;
  --header-height: 5rem;
  --header-height-compact: 4rem;
  --icon-size: 1.5rem;
  --eyebrow-line: 2rem;
  --content-min-height: 60vh;
  --menu-max-width: 24rem;
  --form-max-width: 36rem;
  --logo-max-width: 12rem;
  --photo-min-height: 28rem;
  --photo-min-height-mobile: 20rem;
  --hero-choice-min: 16rem;
  --card-min: 16rem;
  --accordion-max: 56rem;
  --loop-step-min-height: 12rem;
  --loop-line-offset: 50%;
  --screen-reader-size: 0.0625rem;
  --screen-reader-offset: -625rem;
  --focus-offset: 0.1875rem;
  --focus-width: 0.1875rem;
  --underline-offset: 0.2em;
  --underline-thickness: 0.125rem;
  --icon-stroke: 0.125rem;
  --icon-length: 1rem;
  --badge-pad-block: 0.375rem;
  --badge-pad-inline: 0.75rem;

  /* Borders, radii and elevation */
  --border-width-subtle: 0.0625rem;
  --border-width-strong: 0.125rem;
  --border-subtle: 0.0625rem solid rgba(20, 18, 16, 0.1);
  --border-strong: 0.125rem solid #141210;
  --border-focus: 0.1875rem solid #93281d;
  --border-focus-invert: 0.1875rem solid #ffffff;
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 0.25rem 0.75rem rgba(20, 18, 16, 0.06);
  --shadow-md: 0 0.75rem 1.875rem rgba(20, 18, 16, 0.12);
  --shadow-pop: 0.375rem 0.375rem 0 #141210;
  --shadow-pop-active: 0.125rem 0.125rem 0 #141210;

  /* Layout */
  --grid-story: 1.05fr 1fr;
  --grid-thirds: repeat(3, minmax(0, 1fr));
  --grid-halves: repeat(2, minmax(0, 1fr));
  --grid-footer: repeat(4, minmax(0, 1fr));
  --grid-single: minmax(0, 1fr);
  --grid-auto-cards: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  --grid-hero-choices: repeat(2, minmax(min(100%, 16rem), 1fr));
  --grid-loop: repeat(5, minmax(0, 1fr));
  --align-start: start;
  --align-center: center;

  /* Motion */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-instant: 0ms;
  --duration-menu: 300ms;
  --duration-default: 400ms;
  --duration-reveal: 600ms;
  --transition: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-menu: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 600ms cubic-bezier(0, 0, 0.2, 1);
  --reveal-distance: 1.5rem;
  --card-lift: -0.375rem;
  --button-lift: -0.125rem;
  --button-press: 0.125rem;
  --menu-hidden-shift: 100%;
  --header-scroll-threshold: 3.75rem;
  --reveal-threshold: 0.14;

  /* Effects */
  --header-blur: 1rem;
  --opacity-visible: 1;
  --opacity-hidden: 0;
  --opacity-disabled: 0.62;
  --animation-iteration-once: 1;
  --image-aspect: 8 / 9;
  --card-aspect: 4 / 3;
  --rotate-open: 90deg;
  --loop-return-symbol: "↺";

  /* Layers */
  --z-base: 0;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-menu: 40;
  --z-focus: 50;

  /* Breakpoint reference values (resolved literals are used in @media rules) */
  --bp-small: 30rem;
  --bp-mobile: 48rem;
  --bp-tablet: 62rem;
  --bp-desktop: 80rem;
}