/* Design tokens (DeepAgent Brand System: paper, ink and one blue). The only place raw values live.
   Components and pages use var(--…) only. Add to the scale here rather than inlining a one-off value. */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("fonts/schibsted-400.ttf") format("truetype"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("fonts/schibsted-600.ttf") format("truetype"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/schibsted-700.ttf") format("truetype"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-display: swap; src: url("fonts/schibsted-800.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/plexmono-400.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/plexmono-500.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/plexmono-600.ttf") format("truetype"); }

:root {
  /* Color: neutrals. Paper is the page, card is a surface on it. */
  --ink-900: #15202b;    /* ink */
  --ink-700: #2e3a46;
  --ink-600: #4e5a66;    /* muted, 6.3:1 on paper */
  --ink-500: #4e5a66;
  --line: #d9d4c8;
  --line-strong: #8a8f92; /* control borders */
  --line-dash: #a8a195;
  --bg: #f5f3ee;         /* paper */
  --surface: #fcfbf8;    /* card */
  --surface-soft: #ece8df;
  --surface-tint: #e7eefb;

  /* Color: brand. Relay blue; white on it is 6.6:1. */
  --brand: #2457c5;
  --brand-hover: #1a4296;
  --brand-tint: #e7eefb;
  --brand-line: #b9ccf2;
  --brand-ink: #1a4296;
  --on-dark: #f5f3ee;
  --on-dark-muted: #aeb7c0;
  --brand-on-dark: #7fa3f0;

  /* Color: state. Signal (amber) is for the focus ring and preview only, never text. */
  --danger: #9b1c1c;
  --danger-tint: #fdf1f0;
  --success: #1e6b3a;
  --success-tint: #edf6ef;
  --warn-tint: #fff4cf;
  --warn-ink: #5c4400;
  --warn-line: #e9cf72;
  --focus: #f2a900;

  /* Type */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.25rem;
  --text-hero: clamp(2.125rem, 1.35rem + 3.4vw, 3.75rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --track-display: -0.035em;
  --track-heading: -0.02em;
  --track-label: 0.14em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 3.5rem;   /* section gap, mobile */
  --space-9: 6rem;     /* section gap, desktop */

  /* Layout */
  --container: 70rem;  /* 1120 */
  --measure: 40rem;
  --gutter: var(--space-4);

  /* Radii: flat and square. Control 4, card 6, pill for tags. */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Elevation: flat by default; raised is for the highlighted package only. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 1px 0 var(--line), 0 16px 32px -18px rgb(21 32 43 / 0.35);

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

  /* Touch */
  --tap: 48px;
}
@media (min-width: 48rem) { :root { --gutter: var(--space-6); } }
@media (min-width: 64rem) { :root { --gutter: 5rem; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }