/* Perfulet M5 v0.2 — canonical design token layer */
:root{
  /* Color tokens */
  --color-canvas:#f5f1eb;
  --color-canvas-top:#faf7f2;
  --color-surface:#fffdf9;
  --color-surface-muted:#eee7de;
  --color-surface-soft:#f1ebe4;
  --color-ink:#171513;
  --color-ink-soft:#625b54;
  --color-muted:#70685f;
  --color-border:rgba(23,21,19,.14);
  --color-border-strong:rgba(23,21,19,.25);
  --color-accent:#7c5c3c;
  --color-accent-strong:#65452f;
  --color-accent-soft:#e6d9cb;
  --color-success:#365e43;
  --color-warning:#7a5628;
  --color-error:#873d36;
  --color-on-dark:#f8f3ec;
  --color-footer:#1a1715;
  --color-overlay:rgba(17,15,13,.34);
  --color-ink-hover:#292521;
  --color-footer-muted:#beb5aa;
  --color-footer-heading:#eee5db;
  --color-chip-text:#514a43;
  --color-control-text:#4e4842;
  --color-field-label:#4f4842;
  --color-placeholder:#70685f;
  --color-hero-a:#e8dfd4;
  --color-hero-b:#d9c9b6;
  --color-feature-a:#d9c9b8;
  --color-feature-b:#eee6dc;
  --color-feature-c:#f9f5ef;
  --color-main-media:#eee7dd;
  --color-internal:#f0eee9;
  --color-danger-bg:#fff6f3;
  --color-warning-bg:#fff9ef;
  --surface-82:rgba(255,253,249,.82);
  --surface-80:rgba(255,253,249,.80);
  --surface-72:rgba(255,253,249,.72);
  --surface-92:rgba(255,253,249,.92);
  --surface-96:rgba(255,253,249,.96);
  --canvas-glass:rgba(250,247,242,.90);
  --section-alt:rgba(235,228,219,.58);
  --accent-line:rgba(101,69,47,.18);
  --sticky-shadow:0 -12px 30px rgba(40,30,22,.07);

  /* Typography tokens — robust cross-platform system stack */
  --font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --type-display:clamp(3.25rem,6vw,5.25rem);
  --type-h1:clamp(2.75rem,4.7vw,4rem);
  --type-h2:clamp(2rem,3.1vw,2.75rem);
  --type-h3:1.25rem;
  --type-body:1rem;
  --type-body-small:.875rem;
  --type-label:.75rem;
  --type-caption:.75rem;

  /* Spacing tokens */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.75rem;
  --space-9:4rem;
  --space-10:5.5rem;

  /* Radius tokens */
  --radius-s:.625rem;
  --radius-m:1rem;
  --radius-l:1.5rem;
  --radius-pill:999px;

  /* Elevation tokens */
  --elevation-0:none;
  --elevation-1:0 10px 32px rgba(43,33,24,.055);
  --elevation-2:0 24px 70px rgba(43,33,24,.10);

  /* Motion tokens */
  --motion-fast:160ms;
  --motion-standard:260ms;

  /* Interaction tokens */
  --target-min:44px;
  --ease-standard:cubic-bezier(.2,.8,.2,1);

  --max:1320px;

  /* Bridge frozen M4/base component variables into M5 tokens. */
  --bg:var(--color-canvas);
  --panel:var(--color-surface);
  --text:var(--color-ink);
  --muted:var(--color-muted);
  --line:var(--color-border);
  --soft:var(--color-surface-soft);
  --ink:var(--color-ink);
  --focus:var(--color-accent-strong);
  --radius:var(--radius-m);
  --shadow:var(--elevation-1);
}