/* Entur Linje — design tokens
 * Extracted from entur/design-system packages/tokens/src/{primitive,semantic}.json
 * These are the source of truth. Never invent a hex — reference a var.
 */

/* Font faces — Nationale is Entur's official typeface (Playtype Foundry).
 * Licensed for use in official Entur products only.
 */
@font-face {
  font-family: 'Nationale';
  src: url('fonts/Entur-Nationale-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nationale';
  src: url('fonts/Entur-Nationale-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nationale';
  src: url('fonts/Entur-Nationale-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nationale';
  src: url('fonts/Entur-Nationale-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nationale';
  src: url('fonts/Entur-Nationale-Demibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== PRIMITIVE COLORS ===== */
  /* Blue — the Entur deep-blue family, used for brand/contrast backgrounds */
  --blue-10: #f6f6f9;
  --blue-20: #eaeaf1;
  --blue-30: #d9dae8;
  --blue-40: #bcbdd2;
  --blue-50: #9ea0bd;
  --blue-60: #8284ab;
  --blue-70: #626493;
  --blue-80: #54568c;
  --blue-90: #393d79;
  --blue-100: #292b6a;

  /* Lavender — primary action color family */
  --lavender-10: #f0f1fa;
  --lavender-20: #d9ddf2;
  --lavender-30: #c7cdeb;
  --lavender-40: #aeb7e2;
  --lavender-50: #8794d4;
  --lavender-60: #5a68c4;
  --lavender-70: #3b46ab;
  --lavender-80: #262f7d;
  --lavender-90: #181c56;
  --lavender-100: #11143c;

  /* Ebony — neutral dark scale */
  --ebony-5: #f2f2f5;
  --ebony-10: #e5e5e9;
  --ebony-15: #d8d9df;
  --ebony-20: #cccdd4;
  --ebony-25: #bfc0c8;
  --ebony-30: #b3b4bd;
  --ebony-40: #999aa7;
  --ebony-50: #81828f;
  --ebony-60: #6a6b78;
  --ebony-70: #525360;
  --ebony-75: #464755;
  --ebony-80: #393a49;
  --ebony-85: #2d2e3e;
  --ebony-90: #212233;
  --ebony-95: #141527;
  --ebony-100: #08091c;

  /* Grey — neutral warm scale (UI chrome) */
  --grey-10: #f2f5f7;
  --grey-20: #edf0f2;
  --grey-30: #e3e6e8;
  --grey-40: #cfd2d4;
  --grey-50: #b6b8ba;
  --grey-60: #949699;
  --grey-70: #6e6f73;
  --grey-80: #515254;
  --grey-90: #3d3e40;
  --grey-100: #262729;
  --grey-110: #101112;

  /* Coral — destructive / highlight */
  --coral-10: #ffe5e5;
  --coral-20: #ffcece;
  --coral-30: #ff9494;
  --coral-40: #ff5959;
  --coral-50: #f73e3b;
  --coral-60: #d31b1b;
  --coral-70: #b31414;
  --coral-80: #8a1414;
  --coral-90: #5d0e0e;

  /* Mint — success */
  --mint-10: #e6f6f0;
  --mint-20: #d0f1e3;
  --mint-30: #9cd9c2;
  --mint-40: #5ac39a;
  --mint-50: #37ab83;
  --mint-60: #1a8e60;
  --mint-70: #068152;
  --mint-80: #05613e;
  --mint-90: #034029;

  /* Canary — warning */
  --canary-10: #fffbeb;
  --canary-20: #fff4cd;
  --canary-30: #ffeeb3;
  --canary-40: #ffe082;
  --canary-50: #ffda6b;
  --canary-60: #ffca28;
  --canary-70: #e9b10c;
  --canary-80: #b38909;
  --canary-90: #775b09;

  /* Sky — information */
  --sky-10: #e1eff8;
  --sky-20: #acd7f1;
  --sky-30: #64b3e7;
  --sky-40: #2d98d2;
  --sky-50: #067eb2;
  --sky-60: #046690;
  --sky-70: #044d6c;
  --sky-80: #003852;
  --sky-90: #022536;

  /* Peach — accent / travel */
  --peach-10: #fff1eb;
  --peach-20: #ffe4d6;
  --peach-30: #ffd3bd;
  --peach-40: #ffbf9e;
  --peach-50: #fd9a68;
  --peach-60: #fd7835;
  --peach-70: #e6560f;
  --peach-80: #ae4009;
  --peach-90: #742b06;

  /* ===== SEMANTIC TOKENS (light mode) ===== */
  /* Backgrounds */
  --bg-standard: #ffffff; /* page background */
  --bg-tint-light: var(--blue-10); /* Fill/Background/Tint/Light — alt surfaces */
  --bg-tint-neutral: var(--grey-10); /* Fill/Background/Tint/Neutral — inputs */
  --bg-subdued: var(--blue-30); /* dividing large regions */
  --bg-contrast-dark: var(--ebony-90); /* dark containers on light pages */
  --bg-contrast-light: var(--lavender-90); /* branded headers / cards */

  /* Primary action (the big blue CTA) */
  --primary-default: var(--lavender-90); /* Fill/Primary/Default/Light */
  --primary-hover: var(--blue-90); /* Fill/Primary/Hover/Light */
  --primary-active: var(--lavender-100); /* Fill/Primary/Active/Light */
  --primary-contrast: var(--lavender-40); /* on-primary accent */

  /* Secondary / tertiary action */
  --secondary-default: transparent;
  --secondary-hover: var(--lavender-20);
  --secondary-active: var(--lavender-40);

  /* Status */
  --success: var(--mint-60);
  --success-muted: var(--mint-20);
  --success-tint: var(--mint-30);
  --warning: var(--canary-60);
  --warning-muted: var(--canary-20);
  --warning-stroke: var(--canary-70);
  --negative: var(--coral-60);
  --negative-muted: var(--coral-20);
  --negative-tint: var(--coral-30);
  --information: var(--sky-50);
  --information-muted: var(--sky-10);
  --information-tint: var(--sky-20);

  /* Text */
  --text-dark: var(--ebony-100); /* body, default */
  --text-neutral: var(--grey-70); /* secondary body */
  --text-neutral-alt: var(--grey-60); /* captions, helper */
  --text-subdued: var(--blue-70); /* links, labels */
  --text-disabled: var(--grey-80);
  --text-negative: var(--coral-60);
  --text-success: var(--mint-60);
  --text-light: #ffffff; /* on dark/primary */
  --text-accent: var(--lavender-90);

  /* Strokes / dividers */
  --stroke-neutral: var(--grey-30); /* default divider */
  --stroke-neutral-alt: var(--grey-60); /* input border */
  --stroke-dark: var(--ebony-30);
  --stroke-high-contrast: var(--lavender-100);
  --stroke-accent: var(--lavender-90);
  --stroke-negative: var(--coral-60);
  --stroke-success: var(--mint-60);
  --stroke-warning: var(--canary-70);
  --stroke-information: var(--sky-50);
  --stroke-subdued: var(--blue-60);
  --stroke-transparent: #54568c66;

  /* Selection states */
  --selected-default: var(--blue-90); /* selected bg on dark */
  --selected-default-light: var(--blue-10); /* selected bg on light */
  --selected-hover-light: var(--blue-20);

  /* Disabled */
  --disabled-fill: var(--grey-40);

  /* ===== TYPOGRAPHY ===== */
  --font-body: 'Nationale', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Legacy Entur scale (px) */
  --fs-3xs: 10px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px; /* base body */
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  --fs-6xl: 48px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-demibold: 600;

  /* ===== SPACING ===== */
  --space-extra-small: 4px;
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-extra-large: 40px;
  --space-huge: 64px;

  /* ===== RADII ===== */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* ===== SHADOWS ===== */
  --shadow-small: 0 1px 2px rgba(8, 9, 28, 0.06), 0 1px 3px rgba(8, 9, 28, 0.08);
  --shadow-medium: 0 2px 8px rgba(8, 9, 28, 0.08), 0 4px 16px rgba(8, 9, 28, 0.06);
  --shadow-large: 0 6px 24px rgba(8, 9, 28, 0.12), 0 2px 8px rgba(8, 9, 28, 0.06);

  /* ===== LAYOUT ===== */
  --header-height: 64px;
  --sidebar-width: 280px;
  --content-max: 1200px;
  --focus-ring: 0 0 0 3px var(--lavender-40);
}

/* ===== BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-dark);
  background: var(--bg-tint-neutral);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'kern';
}