/* Doktoren — design tokens (colours, type, spacing) + webfonts + base reset.
   Ported from the Doktoren Design System handoff. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Absolutes */
  --white: #ffffff;
  --black: #000000;

  /* Ink — the wordmark black, near-neutral */
  --ink-900: #151719;
  --ink-800: #1f2225;
  --ink-700: #2b2f32;

  /* Paper — architectural off-white */
  --paper: #f4f5f3;
  --paper-dim: #e9eae7;

  /* Stone — neutral concrete grey scale */
  --stone-50:  #f4f5f3;
  --stone-100: #e7e8e4;
  --stone-200: #d3d5d1;
  --stone-300: #b3b6b1;
  --stone-400: #8b8f8b;
  --stone-500: #63676a;
  --stone-600: #4c5053;
  --stone-700: #383c3f;
  --stone-800: #24272a;
  --stone-900: #151719;

  /* Brass — the one warm note; use sparingly */
  --brass-700: #7c5c25;
  --brass-500: #a17c2e;
  --brass-400: #bf9843;
  --brass-200: #e4cf9c;
  --brass-50:  #f2e9d1;

  /* Dock — cool secondary (sky over water) */
  --dock-700: #183848;
  --dock-500: #2a536b;
  --dock-300: #5581a1;
  --dock-100: #c2d6e0;

  /* Signal red — the single locator */
  --signal-red: #e42817;
  --signal-red-deep: #b62c22;

  /* Semantic aliases */
  --bg-page: var(--paper);
  --bg-surface: var(--white);
  --bg-inverse: var(--ink-900);
  --bg-sunken: var(--stone-50);

  --text-strong: var(--ink-900);
  --text-body: var(--stone-700);
  --text-muted: var(--stone-500);
  --text-on-dark: var(--paper);
  --text-on-dark-muted: var(--stone-300);
  --text-accent: var(--brass-700);

  --border-hairline: var(--stone-200);
  --border-strong: var(--ink-900);
  --border-muted: var(--stone-300);

  --accent: var(--brass-500);
  --accent-ink: var(--brass-700);
  --secondary: var(--dock-500);

  /* Feedback */
  --notice-bg: var(--brass-50);
  --notice-border: var(--brass-400);
  --notice-ink: var(--brass-700);
  --info-bg: var(--dock-100);
  --info-border: var(--dock-300);
  --info-ink: var(--dock-700);

  /* Fonts */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — display (Bebas) */
  --display-xxl: 132px;
  --display-xl: 88px;
  --display-lg: 60px;
  --display-md: 42px;
  --display-sm: 30px;

  /* Type scale — text (Archivo) */
  --text-xl: 24px;
  --text-lg: 19px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  /* Line heights */
  --leading-display: 0.92;
  --leading-tight: 1.15;
  --leading-body: 1.55;

  /* Letter-spacing */
  --tracking-display: 0.06em;
  --tracking-wordmark: 0.34em;
  --tracking-eyebrow: 0.22em;
  --tracking-body: 0.005em;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — deliberately tight */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — soft, low */
  --shadow-sm: 0 1px 2px rgba(20, 17, 13, 0.06);
  --shadow-md: 0 6px 18px -6px rgba(20, 17, 13, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(20, 17, 13, 0.24);

  /* Image scrim */
  --scrim-bottom: linear-gradient(to top, rgba(21,23,25,0.72) 0%, rgba(21,23,25,0.15) 45%, rgba(21,23,25,0) 75%);

  /* Layout */
  --measure: 68ch;
  --container: 1200px;
  --container-narrow: 760px;
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: inherit; }

button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; }

:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}