/* Sunday in Lisbon: design tokens. GENERATED from brand/tokens.json (worker sistema, 9 Oct 2026).
   Do not edit by hand: change tokens.json and regenerate. Import brand/fonts/fonts.css as well.
   Colours come from the brand pieces listed in brand/brand-brief.md («Cores da marca»). */

:root {
  /* brand colours */
  --navy: #113267;
  --navy-print: #253872;
  --cream: #F4EEE3;
  --white: #FFFFFF;
  --yellow: #FFDE59;
  /* derived, one per role that needs it */
  --cream-deep: #EBE4D7;
  --navy-muted: #465F87;
  --mist: #BEC9D9;
  --rule-soft: #BEC2C8;
  --rule-soft-inverse: #4E6891;
  --error: #A3261E;

  /* roles */
  --color-surface: var(--cream);
  --color-surface-alt: var(--cream-deep);
  --color-surface-raised: var(--white);
  --color-surface-inverse: var(--navy);
  --color-text: var(--navy);
  --color-text-muted: var(--navy-muted);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: var(--mist);
  --color-accent: var(--yellow);
  --color-action: var(--navy);
  --color-action-hover: var(--navy-print);
  --color-action-text: var(--white);
  --color-action-inverse: var(--cream);
  --color-action-inverse-text: var(--navy);
  --color-ghost-hover: var(--cream-deep);
  --color-focus: var(--navy);
  --color-focus-inverse: var(--yellow);
  --color-rule: var(--navy);
  --color-rule-soft: var(--rule-soft);
  --color-rule-inverse: var(--white);
  --color-rule-soft-inverse: var(--rule-soft-inverse);
  --color-success: var(--navy);
  --color-error: var(--error);
  --color-closed: var(--navy-muted);
  --color-closed-surface: var(--cream-deep);
  --color-selection-bg: var(--navy);
  --color-selection-text: var(--white);
  --color-selection-bg-inverse: var(--yellow);
  --color-selection-text-inverse: var(--navy);
  --color-theme-color: var(--navy);
  --brand: var(--navy);
  --on-brand: var(--white);

  /* type */
  --font-display: "Melodrama", "Melodrama Fallback", "Arial", sans-serif;
  --font-text: "Figtree", "Figtree Fallback", "Arial", sans-serif;
  --weight-display: 500;
  --weight-display-light: 400;
  --weight-text: 400;
  --weight-text-light: 300;
  --weight-ui: 500;
  --weight-label: 600;
  --weight-strong: 700;
  --font-feature-display: "ss01" 1;
  --numeric: tabular-nums lining-nums;
  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.12rem + 0.28vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.38rem + 0.56vw, 1.875rem);
  --step-3: clamp(2rem, 1.67rem + 1.48vw, 3rem);
  --step-4: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --step-5: clamp(2.75rem, 1.82rem + 4.64vw, 6rem);
  --leading-display: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.58;
  --leading-ui: 1.3;
  --tracking-display: -0.005em;
  --tracking-body: 0;
  --tracking-label: 0.06em;
  --measure: 66ch;

  /* space */
  --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, 4.4vw + 32px, 128px);
  --space-gutter: clamp(16px, 3.7vw, 40px);

  /* layout */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 64px;
  --tap: 44px;

  /* shape */
  --radius: 4px;
  --radius-round: 50%;
  --radius-photo: 0;
  --rule: 1px;
  --rule-strong: 2px;
  --focus-offset: 3px;
  --seal: clamp(48px, 3vw + 38px, 72px);
  --button-h: 48px;
  --shadow: none;

  /* wave */
  --wave-divider-h: clamp(30px, 0.93vw + 26.6px, 40px);
  --wave-divider-periods: 3;
  --wave-edge-h: clamp(28px, 2.2vw + 20px, 52px);
  --wave-pattern-size: clamp(200px, 12vw + 150px, 340px);
  --wave-every-size: clamp(300px, 14vw + 250px, 460px);

  /* 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-wave-draw: 700ms;
  --dur-photo-reveal: 700ms;
  --dur-page-out: 160ms;
  --dur-page-wave: 560ms;
  --dur-seal-spin: 28s;
  --dur-fade-reduced: 140ms;
  --stagger-line: 70ms;
  --stagger-item: 55ms;
  --stagger-cap: 440ms;
  /* aliases used in local-business-studio 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 section swaps the roles; everything inside reads from the same names. */
.on-navy, [data-surface="navy"] {
  --color-surface: var(--navy);
  --color-text: var(--white);
  --color-text-muted: var(--mist);
  --color-rule: var(--white);
  --color-rule-soft: var(--rule-soft-inverse);
  --color-focus: var(--yellow);
  --color-action: var(--cream);
  --color-action-hover: var(--white);
  --color-action-text: var(--navy);
  --color-ghost-hover: var(--rule-soft-inverse);
  --color-selection-bg: var(--yellow);
  --color-selection-text: var(--navy);
  background-color: var(--navy);
  color: var(--white);
}
.on-cream-deep, [data-surface="cream-deep"] {
  --color-surface: var(--cream-deep);
  background-color: var(--cream-deep);
}

/* Baseline that belongs to the tokens (design-baseline.md). */
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
:focus-visible { outline: var(--rule-strong) 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-wave-draw: 0ms;
    --dur-photo-reveal: 0ms; --dur-page-wave: var(--dur-fade-reduced); --stagger-line: 0ms; --stagger-item: 0ms;
  }
}