/* Mamma Donella tokens. GENERATED from brand/tokens.json by build_tokens.py: edit the JSON, not this file.
   Every value and its source asset: brand/brand-brief.md. Proposal for Henrique's approval. */

:root {
  /* colour: the brand's marks */
  --md-ink: #0a0303;
  --md-cream: #f0e9dc;
  --md-paper: #fcf7ec;
  --md-terracotta: #d27325;
  --md-brown: #723720;
  --md-shadow: #232121;
  --md-flag-green: #22a64a;
  --md-flag-red: #c02b1d;
  --md-wine: #5d3030;
  --md-ink-muted: #6a5044;
  --md-brown-deep: #5d2d1a;
  --md-gold: #dea26e;

  /* colour: roles */
  --md-surface: var(--md-cream);
  --md-surface-alt: var(--md-paper);
  --md-surface-field: var(--md-terracotta);
  --md-surface-main: var(--md-brown);
  --md-surface-inverse: var(--md-brown);
  --md-board: var(--md-shadow);
  --md-text: var(--md-ink);
  --md-text-muted: var(--md-ink-muted);
  --md-text-inverse: var(--md-cream);
  --md-action: var(--md-brown);
  --md-on-action: var(--md-cream);
  --md-action-hover: var(--md-brown-deep);
  --md-focus: var(--md-brown);
  --md-rule: rgba(10, 3, 3, 0.22);
  --md-rule-strong: var(--md-ink);
  --md-error: var(--md-wine);
  --md-success: var(--md-ink);
  --md-unavailable: var(--md-ink-muted);
  --md-selection: var(--md-brown);
  --md-on-selection: var(--md-cream);
  --md-theme-color: var(--md-brown);

  /* baseline aliases (local-business-studio design-baseline.md) */
  --brand: var(--md-brown);
  --on-brand: var(--md-cream);

  /* type */
  --md-font-display: "Gloock", "Gloock fallback", Georgia, serif;
  --md-font-text: "Fira Sans", "Fira Sans fallback", Arial, sans-serif;
  --md-numeric: tabular-nums lining-nums;
  --md-t-display: clamp(3rem, 2.05rem + 3.9vw, 5.75rem);
  --md-lh-display: 1.02;
  --md-tr-display: -0.015em;
  --md-t-h1: clamp(2.5rem, 1.95rem + 2.25vw, 4rem);
  --md-lh-h1: 1.05;
  --md-tr-h1: -0.01em;
  --md-t-h2: clamp(2rem, 1.65rem + 1.45vw, 3rem);
  --md-lh-h2: 1.08;
  --md-tr-h2: -0.005em;
  --md-t-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  --md-lh-h3: 1.15;
  --md-tr-h3: 0;
  --md-t-h4: clamp(1.1875rem, 1.13rem + 0.24vw, 1.3125rem);
  --md-lh-h4: 1.3;
  --md-tr-h4: 0;
  --md-t-lead: clamp(1.1875rem, 1.1rem + 0.37vw, 1.375rem);
  --md-lh-lead: 1.5;
  --md-t-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --md-lh-body: 1.6;
  --md-t-small: 0.9375rem;
  --md-lh-small: 1.5;
  --md-t-label: 0.8125rem;
  --md-lh-label: 1.3;
  --md-tr-label: 0.1em;
  --md-t-credit: 0.8125rem;
  --md-lh-credit: 1.4;
  --md-measure: 66ch;

  /* space */
  --md-s-1: 4px;
  --md-s-2: 8px;
  --md-s-3: 12px;
  --md-s-4: 16px;
  --md-s-5: 24px;
  --md-s-6: 32px;
  --md-s-7: 48px;
  --md-s-8: 64px;
  --md-s-9: 96px;
  --md-s-10: 128px;
  --md-s-gutter: clamp(16px, 3.2vw, 40px);
  --md-s-section: clamp(48px, 7vw, 128px);
  --md-s-container: 1200px;
  --md-s-container-wide: 1360px;

  /* radius */
  --md-r-block: 0;
  --md-r-button: 3px;
  --md-r-round: 50%;

  /* lines and frames */
  --md-line-hair: 1px;
  --md-line-frame-black: 6px;
  --md-line-frame-wood: 12px;
  --md-line-frame-gold: 14px;
  --md-line-board-frame: 16px;
  --md-line-dash-length: 7.4px;
  --md-line-dash-thickness: 3px;
  --md-line-dash-pitch: 19.4px;
  --md-line-dot: 4px;
  --md-line-dot-pitch: 13px;
  --md-mat: clamp(12px, 4%, 28px);
  --md-mat-bottom: clamp(28px, 7%, 44px);

  /* depth: hard shadow only */
  --md-shadow-button: 4px 4px 0 0 #232121;
  --md-shadow-button-hover: 5px 5px 0 0 #232121;
  --md-shadow-button-pressed: 0 0 0 0 #232121;
  --md-shadow-frame: 6px 6px 0 0 #232121;
  --md-shadow-frame-main: 9px 9px 0 0 #5d2d1a;
  --md-shadow-button-wall: 4px 4px 0 0 #5d2d1a;
  --md-shadow-frame-wall: 6px 6px 0 0 #5d2d1a;

  /* motion */
  --md-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --md-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --md-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --md-dur-press: 120ms;
  --md-dur-hover: 180ms;
  --md-dur-ui: 240ms;
  --md-dur-drawer-in: 280ms;
  --md-dur-drawer-out: 200ms;
  --md-dur-page-out: 160ms;
  --md-dur-page-in: 380ms;
  --md-dur-page-in-delay: 60ms;
  --md-dur-title-line: 520ms;
  --md-dur-title-stagger: 70ms;
  --md-dur-frame-hang: 620ms;
  --md-dur-frame-stagger: 90ms;
  --md-dur-chalk-line: 640ms;
  --md-dur-chalk-stagger: 180ms;
  --md-dur-ring-turn: 1600ms;
  --md-dur-photo-reveal: 700ms;
  --md-dur-reduced-out: 120ms;
  --md-dur-reduced-in: 160ms;
  --md-frame-drop: 8px;
  --md-ring-turn-angle: -24deg;

  /* layers */
  --md-z-header: 20;
  --md-z-drawer: 40;
  --md-z-skip-link: 60;

  /* browser surfaces */
  color-scheme: light;
  accent-color: var(--md-brown);
  caret-color: var(--md-brown);
}

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

/* Grounds switch the focus ring, the rule, the shadow and the selection so they keep 3:1 and 4.5:1.
   Terracota (the wall, .md-on-field / .md-on-wall) carries no text and nothing black or dark grey, on it or
   touching it (Henrique, 9 Oct 2026): focus ring in paper (3,16:1), rule in castanho, shadows in castanho fundo.
   Castanho (the main field, dark header, footer: .md-on-dark / .md-on-main): cream text, focus and rule. */
.md-on-field, .md-on-wall {
  --md-focus: var(--md-paper); --md-rule-strong: var(--md-brown);
  --md-shadow-button: var(--md-shadow-button-wall); --md-shadow-button-hover: var(--md-shadow-button-wall);
  --md-shadow-frame: var(--md-shadow-frame-wall);
}
.md-on-dark, .md-on-main {
  --md-focus: var(--md-cream); --md-selection: var(--md-cream); --md-on-selection: var(--md-brown);
  --md-text: var(--md-cream); --md-text-muted: var(--md-cream); --md-rule-strong: var(--md-cream);
  --md-rule: rgba(240, 233, 220, 0.3);
}
.md-on-dark ::selection, .md-on-main ::selection { background: var(--md-selection); color: var(--md-on-selection); }

:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 3px; }