/* Design tokens: Gold aus dem Logo von B. Hair & More, Stahl der Schere, warmes Schwarz eines Barbershops am Abend. */
:root {
  color-scheme: dark;

  /* Flächen */
  --ink-950: #0b0907;
  --ink-900: #120f0b;
  --ink-850: #19150f;
  --ink-800: #221c14;
  --line: rgb(241 233 220 / 0.12);
  --line-strong: rgb(241 233 220 / 0.28);

  /* Helle Seite unter dem Header: warmes Papier, tiefes Braunschwarz, Kupfer aus der Färbe-Szene */
  --bone: #efeae3;
  --bone-2: #e4ddd2;
  --ink-text: #161310;
  --ink-soft: #5b544c;
  --copper: #a3452a;
  --line-ink: rgb(22 19 16 / 0.14);

  /* Schrift */
  --paper: #f1e9dc;
  --sand-300: #d3c4ad;
  --sand-500: #a8977f;
  --muted: rgb(241 233 220 / 0.64);

  /* Akzente mit Bedeutung */
  --gold: #c99a4b;        /* Handlung, Marke */
  --gold-hot: #e8c27c;
  --gold-deep: #ab7f31;   /* Logo-Gold, nur als Fläche */
  --steel: #d9d7d2;
  --open: #9fdc8c;        /* jetzt geöffnet */
  --closed: #ff7a62;

  /* Typografie */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --text-3xl: clamp(2.75rem, 1.2rem + 6vw, 7rem);
  --text-hero: clamp(3.4rem, 1rem + 8.4vw, 10rem);

  /* Abstände */
  --gutter: clamp(1rem, 0.6rem + 2.4vw, 3.5rem);
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --maxw: 92rem;

  /* Bewegung */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}