/* ==========================================================================
   Izakaya Tenzo — design tokens
   Mirrors the token set in the Paper file "Izakaya Tenzo".
   Token names match Paper exactly, so a value changed there is a one line
   change here. Nothing in styles.css uses a raw hex or a raw pixel size.
   ========================================================================== */

:root {
  /* --- Colour: brand ----------------------------------------------------- */
  --color-brand: #be1e2d;
  --color-brand-deep: #8f1622;
  --color-brand-soft: rgb(190 30 45 / 0.7);
  --color-cream: #f9e9da;
  --color-ink: #231f20;
  --color-black: #000000;
  --color-white: #ffffff;

  /* --- Colour: surfaces -------------------------------------------------- */
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-sunken: #ebebeb;

  /* --- Colour: text ------------------------------------------------------ */
  --color-text: #000000;
  --color-text-muted: #5e5e5e;
  --color-text-inverse: #ffffff;
  --color-text-inverse-soft: #eaeaea;
  --color-text-inverse-muted: #c4c4c4;

  /* --- Colour: lines, scrims, chips -------------------------------------- */
  --color-line: rgb(0 0 0 / 0.2);
  --color-line-inverse: rgb(255 255 255 / 0.16);
  --color-scrim: rgb(0 0 0 / 0.6);
  --color-scrim-strong: rgb(0 0 0 / 0.8);
  --color-chip: rgb(28 28 28 / 0.1);

  /* --- Type: families ---------------------------------------------------- */
  /* Capitolium is a licensed desktop font. Until a webfont kit is licensed
     the stack falls back to Georgia, which shares its old style proportions.
     See README for the licensing note. */
  --font-display: "Capitolium", "Capitolium Road", Georgia, "Times New Roman", serif;
  --font-body: "Roboto Serif", Georgia, "Times New Roman", serif;

  /* --- Type: weights ----------------------------------------------------- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* --- Type: sizes (desktop) --------------------------------------------- */
  --text-display-xl: 58px;
  --text-display: 48px;
  --text-title: 20px;
  --text-action: 16px;
  --text-body: 14px;
  --text-label: 12px;
  --text-micro: 10px;

  /* --- Type: sizes (mobile source values) -------------------------------- */
  --text-display-xl-mobile: 36px;
  --text-display-mobile: 32px;
  --text-body-mobile: 12px;

  /* --- Type: line heights ------------------------------------------------ */
  --leading-display-xl: 58px;
  --leading-display: 52px;
  --leading-title: 28px;
  --leading-body: 22px;
  --leading-flat: 100%;
  --leading-display-xl-mobile: 38px;
  --leading-display-mobile: 34px;
  --leading-body-mobile: 20px;

  /* --- Type: tracking ---------------------------------------------------- */
  --tracking-display: -0.01em;
  --tracking-normal: 0em;
  --tracking-label: 0.03em;
  --tracking-micro: 0.08em;

  /* --- Spacing ----------------------------------------------------------- */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 104px;
  --spacing-gutter: 120px;
  --spacing-section: 144px;
  --spacing-gutter-mobile: 32px;
  --spacing-section-mobile: 72px;
  --spacing-touch: 44px;

  /* --- Containers -------------------------------------------------------- */
  --container-page: 1440px;
  --container-content: 1200px;
  --container-narrow: 1080px;
  --container-column: 548px;
  --container-text: 528px;
  --container-mobile: 326px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* --- Opacity ----------------------------------------------------------- */
  --opacity-scrim: 0.6;
  --opacity-muted: 0.6;
  --opacity-tint: 0.2;
  --opacity-strong: 0.8;

  /* --- Breakpoints (documented here, used in the media queries below) ----- */
  --breakpoint-large: 1440px;
  --breakpoint-desktop: 1240px;
  --breakpoint-tablet: 768px;
  --breakpoint-phone: 390px;

  /* --- Derived: what the layout actually reads --------------------------- */
  --gutter: var(--spacing-gutter);
  --section-space: var(--spacing-section);
  --container: var(--container-content);
}

/* ==========================================================================
   Mobile tier.
   Only the values that genuinely change get remapped. Colour, weight,
   tracking and radius are identical at every width by design.
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --text-display-xl: var(--text-display-xl-mobile);
    --text-display: var(--text-display-mobile);
    --text-body: var(--text-body-mobile);

    --leading-display-xl: var(--leading-display-xl-mobile);
    --leading-display: var(--leading-display-mobile);
    --leading-body: var(--leading-body-mobile);

    --gutter: var(--spacing-gutter-mobile);
    --section-space: var(--spacing-section-mobile);
    --container: var(--container-mobile);
  }
}