/* Meza.Libaneza: design tokens. GENERATED from brand/tokens.json by brand/ferramentas/build_tokens.py
   (worker sistema, 9 Oct 2026). Do not edit by hand: change tokens.json and regenerate.
   Import brand/fonts/fonts.css before this file. Colours come from the house's own pieces
   (brand/brand-brief.md, «Cores da marca»); every text pair is checked by the generator. */

:root {
  /* brand colours (menu PDF, logo, sign) */
  --navy: #053754;
  --red: #E03126;
  --cream: #EEEBE4;
  /* derived, one per role that needs it */
  --cream-deep: #E8E4DB;
  --cream-light: #F7F5F0;
  --navy-soft: #416177;
  --mist: #B2BBBF;
  --navy-raised: #154766;
  --red-ink: #B02018;

  /* roles */
  --color-surface: var(--cream);
  --color-surface-alt: var(--cream-deep);
  --color-surface-raised: var(--cream-light);
  --color-surface-inverse: var(--navy);
  --color-surface-inverse-hover: var(--navy-raised);
  --color-text: var(--navy);
  --color-text-muted: var(--navy-soft);
  --color-text-inverse: var(--cream);
  --color-text-inverse-muted: var(--mist);
  --color-accent: var(--red);
  --color-accent-text: var(--red-ink);
  --color-action: var(--navy);
  --color-action-hover: var(--navy-raised);
  --color-action-text: var(--cream);
  --color-action-inverse: var(--cream);
  --color-action-inverse-hover: var(--cream-light);
  --color-action-inverse-text: var(--navy);
  --color-ghost-hover: var(--cream-deep);
  --color-focus: var(--navy);
  --color-focus-inverse: var(--cream);
  --color-rule: var(--navy);
  --color-rule-soft: var(--mist);
  --color-rule-inverse: var(--cream);
  --color-rule-soft-inverse: var(--navy-soft);
  --color-disabled-surface: var(--cream-deep);
  --color-disabled-text: var(--navy-soft);
  --color-closed-surface: var(--cream-deep);
  --color-closed-text: var(--navy-soft);
  --color-now: var(--red);
  --color-today: var(--red-ink);
  --color-error: var(--red-ink);
  --color-success: var(--navy);
  --color-selection-bg: var(--red-ink);
  --color-selection-text: var(--cream);
  --color-selection-bg-inverse: var(--cream);
  --color-selection-text-inverse: var(--navy);
  --color-theme: var(--cream);
  --brand: var(--navy);
  --on-brand: var(--cream);

  /* type */
  --font-text: "Poppins", "Poppins Fallback", Arial, sans-serif;
  --font-display: "Poppins", "Poppins Fallback", Arial, sans-serif;
  --weight-text: 400;
  --weight-label: 600;
  --weight-heading: 700;
  --weight-display: 800;
  --numeric: tabular-nums lining-nums;
  --step--1: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem); /* 14 to 15 px */
  --step-0: clamp(1.0625rem, 1.0446rem + 0.0893vw, 1.125rem); /* 17 to 18 px */
  --step-1: clamp(1.1875rem, 1.1518rem + 0.1786vw, 1.3125rem); /* 19 to 21 px */
  --step-2: clamp(1.375rem, 1.3036rem + 0.3571vw, 1.625rem); /* 22 to 26 px */
  --step-3: clamp(1.5625rem, 1.2946rem + 1.3393vw, 2.5rem); /* 25 to 40 px */
  --step-4: clamp(2.125rem, 1.5893rem + 2.6786vw, 4rem); /* 34 to 64 px */
  --step-5: clamp(2.3125rem, 1.1161rem + 5.9821vw, 6.5rem); /* 37 to 104 px */
  --leading-display: 1.0;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --leading-ui: 1.3;
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.04em;
  --measure: 66ch;

  /* the cut letter (half a reel turn), for a box with line-height 1 */
  --cut-line: 0.4995em;
  --cut-shift: 0.3505em;
  --cut-gap: 0.05em;

  /* space: 4 px base */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(48px, 25.14px + 7.143vw, 128px);
  --space-gutter: clamp(20px, 4.5vw, 80px);

  /* layout */
  --wrap: 1440px;
  --wrap-narrow: 820px;
  --header-h: 64px;
  --tap: 44px;
  --button-h: 48px;

  /* shape: square corners, flat */
  --radius: 0;
  --rule: 2px;
  --rule-soft: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow: none;

  /* azulejo pattern (files in brand/padroes/) */
  --pattern-module: clamp(36px, 28.00px + 2.500vw, 64px);
  --pattern-band-gap: clamp(48px, 34.29px + 4.286vw, 96px);

  /* icons: Phosphor, one weight */
  --icon-weight: bold;
  --icon-size: 1.25em;

  /* motion */
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-in-out: cubic-bezier(0.77,0,0.175,1);
  --ease-drawer: cubic-bezier(0.32,0.72,0,1);
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-micro: 200ms;
  --dur-exit: 160ms;
  --dur-enter: 300ms;
  --dur-drawer-in: 280ms;
  --dur-drawer-out: 200ms;
  --dur-title-line: 520ms;
  --dur-reveal: 620ms;
  --dur-photo-reveal: 700ms;
  --dur-reel: 900ms;
  --dur-cut-slide: 560ms;
  --dur-tile: 320ms;
  --dur-page-out: 160ms;
  --dur-page-in: 300ms;
  --dur-fade-reduced: 140ms;
  --stagger-line: 70ms;
  --stagger-item: 55ms;
  --stagger-tile: 35ms;
  --stagger-cap: 440ms;
  /* aliases used in local-business-studio/reference/motion.md */
  --e-out: var(--ease-out);
  --e-in-out: var(--ease-in-out);
  --e-gaveta: var(--ease-drawer);

  /* layers */
  --z-header: 10;
  --z-action-bar: 10;
  --z-drawer: 20;
  --z-skip-link: 30;

  color-scheme: light;
  accent-color: var(--brand);
  caret-color: var(--brand);
}

/* A navy surface (the menu's full box) swaps the roles; everything inside reads the same names.
   Red never carries text here (2.76:1). On navy it is shape only (pattern, logo). */
.on-navy, [data-surface="navy"] {
  --color-surface: var(--navy);
  --color-text: var(--cream);
  --color-text-muted: var(--mist);
  --color-rule: var(--cream);
  --color-rule-soft: var(--navy-soft);
  --color-focus: var(--cream);
  --color-action: var(--cream);
  --color-action-hover: var(--cream-light);
  --color-action-text: var(--navy);
  --color-ghost-hover: var(--navy-raised);
  --color-selection-bg: var(--cream);
  --color-selection-text: var(--navy);
  background-color: var(--navy);
  color: var(--cream);
}
.on-cream-deep, [data-surface="cream-deep"] {
  --color-surface: var(--cream-deep);
  background-color: var(--cream-deep);
}

/* Baseline that belongs to the tokens (local-business-studio/reference/design-baseline.md). */
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.num, .price, .preco, .hours, .horas, time { font-variant-numeric: var(--numeric); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-title-line: 0ms; --dur-reveal: var(--dur-fade-reduced); --dur-photo-reveal: 0ms;
    --dur-reel: 0ms; --dur-cut-slide: 0ms; --dur-tile: 0ms; --dur-page-in: var(--dur-fade-reduced);
    --stagger-line: 0ms; --stagger-item: 0ms; --stagger-tile: 0ms;
  }
}