/* ============================================================
   Vores Tog rekruttering — design tokens
   Ported from the Claude Design handoff (_ds/tokens/*.css).
   Colors, typography and spacing only — no component styles here.
   ============================================================ */

:root {
  /* Brand core */
  --vt-white: #ffffff;
  --vt-blue: #1a1e45;
  --vt-orange: #fa6007;

  --vt-blue-tint: #2a2f5e;
  --vt-blue-deep: #12152f;
  --vt-orange-deep: #e0540a;
  --vt-orange-soft: #fff1e8;

  --gray-50:  #f5f6f9;
  --gray-100: #ebedf2;
  --gray-200: #dcdfe8;
  --gray-300: #c5cad7;
  --gray-400: #9ca3b8;
  --gray-500: #6e7589;
  --gray-600: #4d5468;
  --gray-700: #353b54;
  --gray-800: #232845;
  --gray-900: #1a1e45;

  --green-500:  #1f8a5b;
  --green-soft: #e6f4ed;
  --amber-500:  #b7791f;
  --amber-soft: #fbf2e0;
  --red-500:    #cf3b2e;
  --red-soft:   #fbeae8;
  --info-500:   #2a5fb0;
  --info-soft:  #e8eff8;

  --surface-page:    var(--gray-50);
  --surface-card:    var(--vt-white);
  --surface-sunken:  var(--gray-100);
  --surface-inverse: var(--vt-blue);
  --surface-accent:  var(--vt-orange-soft);

  --text-strong:   var(--vt-blue);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-faint:    var(--gray-400);
  --text-on-dark:  var(--vt-white);
  --text-on-accent:var(--vt-white);

  --border-subtle: var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong: var(--gray-400);
  --border-focus:  var(--vt-orange);

  --action-primary:       var(--vt-blue);
  --action-primary-hover: var(--vt-blue-tint);
  --action-primary-press: var(--vt-blue-deep);
  --action-on-primary:    var(--vt-white);

  --accent:        var(--vt-orange);
  --accent-hover:  var(--vt-orange-deep);
  --accent-on:     var(--vt-white);

  --ring: rgba(250, 96, 7, 0.45);

  /* Typography */
  --font-sans: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Spacing / radius / shadow */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  --shadow-xs: 0 1px 2px rgba(26, 30, 69, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 30, 69, 0.08), 0 1px 2px rgba(26, 30, 69, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 30, 69, 0.10);
  --shadow-lg: 0 12px 32px rgba(26, 30, 69, 0.14);
  --shadow-focus: 0 0 0 3px var(--ring);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);

  --container-max: 1200px;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}