/* WiseApps Group design tokens: the one place for colour, type, space, shape and motion.
   Components in styles.css use these variables only. Change a value here, never in a component.
   Rules and reasons: context/DESIGN.md */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Inter-normal-400_700.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-italic-400.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-normal-500.woff2) format('woff2');
}

:root {
  /* Colour: warm paper, ink, one accent (orange). */
  --paper: #f6f3ee;
  --paper-soft: #eee8de;
  --card: #fffdf9;
  --ink: #16181d;
  --ink-body: #363a42;
  --muted: #5d636c;
  --line: #e0d8cc;
  --accent: #b93d0b;
  --accent-hover: #9a3412;
  --accent-soft: #fbe3d3;
  --night: #121315;
  --night-2: #1c1e22;
  --night-text: #f4f0e9;
  --night-muted: #b7b1a7;
  --night-line: #2c2f35;
  --accent-on-night: #f4935f;
  --focus: #b93d0b;
  --focus-on-night: #f4935f;

  /* Product colours: each card wears its product's own brand. */
  --pw-band: #f7f2ea;
  --pw-ink: #4c2a85;
  --ts-band: #121315;
  --ts-ink: #f5c518;
  --ss-band: #e3f0f2;
  --cl-band: #00266b;
  --lg-band: #fff8f5;
  --dc-band: #0b2545;
  --dc-ink: #0f766e;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --size-hero: clamp(2.5rem, 6.4vw, 5.2rem);
  --size-display: clamp(2.6rem, 7.4vw, 6.6rem);
  --size-name: clamp(2.1rem, 4.2vw, 3.4rem);
  --size-statement: clamp(1.9rem, 4.6vw, 3.9rem);
  --size-cap: clamp(1.5rem, 3.4vw, 2.6rem);
  --size-ribbon: clamp(1.4rem, 3.4vw, 2.6rem);
  --size-title: clamp(1.9rem, 4.4vw, 3.3rem);
  --size-h3: 1.3rem;
  --size-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-label: 0.75rem;
  --lh-tight: 1.04;
  --lh-head: 1.2;
  --lh-body: 1.6;
  --track-label: 0.14em;
  --track-head: -0.025em;

  /* Space and layout */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4rem, 9vw, 7.5rem);
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4rem;
  --tap: 2.75rem;

  /* Shape */
  --hair: 1px;
  --rule: 2px;
  --ring: 3px;
  --r-s: 0.5rem;
  --r-m: 0.875rem;
  --r-l: 1.25rem;
  --r-xl: 2.25rem;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(22 24 29 / 0.06), 0 4px 16px rgb(22 24 29 / 0.06);
  --shadow-2: 0 2px 4px rgb(22 24 29 / 0.08), 0 18px 40px rgb(22 24 29 / 0.12);
  --shadow-icon: 0 6px 16px rgb(0 0 0 / 0.35);
  --notch: #000;
  --shadow-phone: 0 30px 60px rgb(22 24 29 / 0.28), 0 8px 18px rgb(22 24 29 / 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;
  --rise: 1.25rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-slower: 1.1s;
  --stack-step: 1.1rem;
}