/*
  KLEIN Foundry Systems — Design Tokens
  Layout, components and effects follow the original site (dark video hero,
  pill buttons with the flow effect, floating header; soft shadows since v16).
  Colours and type are the foundry palette: cast-iron anthracite for type and
  the dark bands, light fireclay greys for grounds and product panels, and
  copper — the material of the induction coil — as the accent.
  Typography: Barlow (headings, buttons, labels) + Source Sans 3 (text),
  both self-hosted (see fonts.css).

  Contrast (WCAG 2.x, light mode):
    ink #1E2227 on ground #F2F1EF ........ 14.9:1
    slate #545A61 on ground / panel ...... 6.2:1 / 5.6:1
    copper #A84A1F on white / ground ..... 5.7:1 / 5.1:1
    white on copper (buttons) ............ 5.7:1
    dark-text-soft on anthracite ......... 7.9:1
    copper-light on anthracite ........... 7.0:1
  Dark mode: ink 13.9:1, slate 7.4:1, accent 7.3:1 on #1B1E22.

  Token names are unchanged from the original neutral system so every
  component picks up the palette without markup changes.
*/

:root {
  /* tells the browser which native controls to draw (scrollbars, autofill,
     textarea grip) — flipped to dark together with html.dark below */
  color-scheme: light;

  /* Color — neutrals (light mode) */
  --color-ink: #1e2227;          /* cast iron: headings, strong text */
  --color-ink-soft: #3b4046;     /* running text */
  --color-slate: #545a61;        /* iron grey: leads, secondary text */
  --color-slate-light: #6b7178;  /* tertiary text (≥4.5:1 on white) */
  --color-border: #d6d3ce;       /* warm rule */
  --color-border-strong: #8c8882;/* field grey: inputs, chips (3.5:1) */
  --color-surface: #ffffff;      /* cards, white bands */
  --color-surface-2: #e7e5e2;    /* fireclay panel */
  --color-bg: #f2f1ef;           /* fireclay ground */
  --color-panel: #e7e5e2;        /* background behind cut-out products */

  /* Color — anthracite bands (top bar, contact band, footer) */
  --color-dark: #23272c;
  --color-dark-surface: #2b3036;
  --color-dark-border: #3a4047;
  --color-dark-text: #f2f1ef;
  --color-dark-text-soft: #b9bdc2;

  /* Color — primary: coil copper */
  --color-accent: #a84a1f;
  --color-accent-hover: #8e3d18;
  --color-accent-light: #e6a27f; /* copper on anthracite */
  --color-accent-tint: #f4e8e1;
  --color-accent-foreground: #ffffff;

  /* Color — semantic */
  --color-danger: #b42318;
  --color-danger-tint: #fbe9e7;
  --color-focus: #a84a1f;

  /* Typography */
  --font-heading: "Barlow", "Source Sans 3", "Arial", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", "Arial", sans-serif;
  /* technical values use the text face with tabular figures, not a code font */
  --font-mono: "Source Sans 3", "Segoe UI", "Arial", sans-serif;

  --text-xs: 0.9375rem;   /* 15px — captions, hints */
  --text-sm: 1rem;        /* 16px — small text, tables, chips */
  --text-base: 1.125rem;  /* 18px — body */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.375rem;   /* 38px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Spacing (8px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Radius — soft, generous corners (v16): controls, cards, photos */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 1.25rem;
  --header-height: 72px;

  /* Motion — strong ease-out, short durations */
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  /* the primary buttons' "flow" hover: a long, soft settle for the fill and
     text, and a slight overshoot for the arrows */
  --ease-flow: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-flow-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* on-screen movement (image wipes, the process line) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* scroll reveals and everything that travels a distance: a long, soft
     settle without the hard stop of --ease-standard (v16) */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal: 900ms;

  /* molten-metal glow for the anthracite bands — decorative only, never
     used for text */
  --color-ember: #ff7a2f;

  /* Shadow — soft, layered depth (v16; was a flat hard shadow): resting
     cards, floating surfaces (header pill, menus), lifted cards. Cut-out
     products get a soft object shadow. */
  --shadow-sm: 0 1px 2px rgba(30, 34, 39, 0.05), 0 2px 8px -2px rgba(30, 34, 39, 0.06);
  --shadow-md: 0 1px 2px rgba(30, 34, 39, 0.06), 0 10px 28px -10px rgba(30, 34, 39, 0.18);
  --shadow-lg: 0 2px 4px rgba(30, 34, 39, 0.05), 0 28px 56px -20px rgba(30, 34, 39, 0.3);
  --shadow-object: drop-shadow(0 22px 22px rgba(30, 34, 39, 0.22));
}

html.dark {
  color-scheme: dark;
  --color-ink: #eceae6;
  --color-ink-soft: #cfccc7;
  --color-slate: #a9adb2;
  --color-slate-light: #9a9ea4;
  --color-border: #3a4047;
  --color-border-strong: #6b7178;
  --color-surface: #23272c;
  --color-surface-2: #2e3339;
  --color-bg: #1b1e22;
  --color-panel: #2e3339;

  --color-dark: #121417;
  --color-dark-surface: #1b1e22;
  --color-dark-border: #2e3339;

  --color-accent: #e39a72;
  --color-accent-hover: #f0b392;
  --color-accent-light: #e6a27f;
  --color-accent-tint: #3a2a22;
  --color-accent-foreground: #1b1e22;

  --color-danger: #f08f7f;
  --color-danger-tint: #3a2321;
  --color-focus: #e39a72;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 28px 56px -20px rgba(0, 0, 0, 0.7);
  --shadow-object: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.45));
}