/* CERAMIQUE B2B — Design tokens from Stitch DESIGN.md */
:root {
  /* Surfaces */
  --surface: #f7f9fd;
  --surface-dim: #d8dade;
  --surface-bright: #f7f9fd;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f8;
  --surface-container: #eceef2;
  --surface-high: #e6e8ec;
  --surface-highest: #e0e2e6;
  --surface-variant: #e0e2e6;

  --on-surface: #191c1f;
  --on-surface-variant: #43474c;
  --background: #f7f9fd;
  --on-background: #191c1f;

  /* Brand */
  --primary: #162839;
  --on-primary: #ffffff;
  --primary-container: #2c3e50;
  --on-primary-container: #96a9be;
  --primary-fixed: #d1e4fb;
  --primary-fixed-dim: #b5c8df;

  --secondary: #6b5e24;
  --on-secondary: #ffffff;
  --secondary-container: #f1e098;
  --on-secondary-container: #6f6228;
  --secondary-fixed: #f4e29b;

  --tertiary: #362308;
  --tertiary-container: #4e381c;
  --on-tertiary-container: #c1a17d;

  --outline: #74777d;
  --outline-variant: #c4c6cd;
  --error: #ba1a1a;

  --inverse-surface: #2d3134;
  --inverse-on-surface: #eff1f5;

  /* Type — calm showroom scale: readable floor, restrained display */
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: "Syne", "Outfit", system-ui, sans-serif;

  --text-headline-lg: 52px;
  --lh-headline-lg: 60px;
  --text-headline-lg-m: 36px;
  --lh-headline-lg-m: 44px;
  --text-headline-md: 26px;
  --lh-headline-md: 34px;
  --text-body-lg: 19px;
  --lh-body-lg: 30px;
  --text-body: 18px;
  --lh-body: 28px;
  --text-caption: 16px;
  --lh-caption: 26px;
  /* Floor for mono labels / meta; never ship UI text below this */
  --text-label: 15px;
  --lh-label: 22px;
  --text-meta: 14px;
  --lh-meta: 20px;

  /* Layout */
  --unit: 4px;
  --gutter: 24px;
  --margin: 64px;
  --margin-m: 16px;
  /* Soft ceramic UI: light corner ease, not pills */
  --radius: 4px;
  --radius-sm: 2px;
  /* Editorial / showroom photography frames — soft, not pill-like */
  --radius-media: clamp(4px, 0.6vw, 8px);
  --max: 1440px;
  --max-wide: 1920px;
  --header-offset: 116px; /* announce 36 + navbar 80 */

  --ease: 0.2s ease;
  --ease-slow: 0.5s ease;
}