/* Fabrikken Design System — tokens + base type
   Light only · Nordic minimal · Vibrant orange accent */

:root {
  /* Brand */
  --brand-orange:      #FF5B00;
  --brand-orange-600:  #E84F00;
  --brand-orange-700:  #C03F00;
  --brand-orange-50:   #FFF4ED;
  --brand-orange-100:  #FFE4D1;

  /* Cool secondaries (sparingly) */
  --accent-fjord:      #2A6F97;
  --accent-pine:       #2F6B4D;
  --accent-amber:      #C68900;
  --accent-rust:       #B23A1F;

  /* Neutrals — warm */
  --paper:             #FBFAF7;
  --surface:           #FFFFFF;
  --surface-sunk:      #F5F3EE;

  --ink-900: #14110F;
  --ink-700: #2A2622;
  --ink-500: #5C554E;
  --ink-400: #807870;
  --ink-300: #B8B0A6;
  --ink-200: #DCD6CC;
  --ink-150: #E8E3D9;
  --ink-100: #F0EDE5;

  /* Semantic */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-500);
  --fg-link: var(--brand-orange);
  --fg-link-hover: var(--brand-orange-600);

  --bg-page: var(--paper);
  --bg-surface: var(--surface);
  --bg-sunk: var(--surface-sunk);
  --bg-tint: var(--brand-orange-50);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong: var(--ink-200);

  /* Type families */
  --font-sans:    'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(20,17,15,.04);
  --shadow-sm: 0 1px 2px rgba(20,17,15,.05), 0 1px 1px rgba(20,17,15,.03);
  --shadow-md: 0 2px 6px rgba(20,17,15,.06), 0 1px 2px rgba(20,17,15,.04);
  --shadow-lg: 0 8px 24px rgba(20,17,15,.08), 0 2px 6px rgba(20,17,15,.05);
  --shadow-xl: 0 24px 48px rgba(20,17,15,.10), 0 6px 12px rgba(20,17,15,.06);
  --shadow-focus: 0 0 0 3px rgba(255,91,0,.22);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
}

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

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-orange-100); color: var(--ink-900); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--fg-1); margin: 0; }

p { margin: 0; }

a { color: var(--fg-link); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
@media (forced-colors: active) {
  a:focus-visible { outline: 2px solid ButtonText; outline-offset: 2px; box-shadow: none; }
}

img { display: block; max-width: 100%; }
button { font-family: inherit; }