/* Ekskog primitives and semantic tokens. Component CSS uses these variables only. */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+20AC, U+2212;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+20AC, U+2212;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+20AC, U+2212;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+20AC, U+2212;
}

:root {
  color-scheme: light;

  /* Hex primitives */
  --birch: #F3F5F1;
  --white: #FFFFFF;
  --ekskog: #15302E;
  --muted-hex: #4E625F;
  --ugglevinge: #2E6B69;
  --ugglevinge-hover: #1F4E4C;
  --fjader: #D6AE7B;
  --ockra: #8A5A1F;
  --feather-hex: #FBF3E4;
  --pupil-hex: #3B2B20;
  --success-hex: #047857;
  --success-fill-hex: #059669;
  --danger-hex: #BE123C;
  --warning-hex: #92400E;

  /* OKLCH primitives */
  --oklch-bg: oklch(96.8% 0.006 129);
  --oklch-ink: oklch(28.7% 0.033 189);
  --oklch-action: oklch(48.7% 0.063 192);
  --oklch-border: oklch(90% 0.012 180);
  --oklch-action-soft: oklch(95.2% 0.012 190);
  --oklch-mottagen-bg: oklch(95.6% 0.012 180);
  --oklch-bekraftad-bg: oklch(90.5% 0.02 185);
  --oklch-success-soft: oklch(96% 0.02 160);
  --oklch-danger-soft: oklch(95.5% 0.018 15);
  --oklch-warning-soft: oklch(94.5% 0.03 80);
  --oklch-arkiv-bg: oklch(93.8% 0.006 170);
  --oklch-avbokad-bg: oklch(93.5% 0.01 50);

  /* Colour roles */
  --bg: var(--birch);
  --surface: var(--white);
  --ink: var(--ekskog);
  --ink-muted: var(--muted-hex);
  --on-action: var(--white);
  --on-ink: var(--white);
  --action: var(--ugglevinge);
  --action-hover: var(--ugglevinge-hover);
  --action-soft: #E4F1F0;
  --warm: var(--fjader);
  --warm-ink: var(--ockra);
  --feather: var(--feather-hex);
  --success: var(--success-hex);
  --success-fill: var(--success-fill-hex);
  --success-soft: #E5F6EE;
  --danger: var(--danger-hex);
  --danger-soft: #FDE8EE;
  --warning: var(--warning-hex);
  --warning-soft: #F8EBD4;
  --border: var(--oklch-border);
  --focus: var(--action);

  /* Status chips: soft tint and darker same-hue text, each pair at least 4.5:1 */
  --status-mottagen-bg: #E7F3F2;
  --status-mottagen-ink: #15302E;
  --status-bokad-bg: #F6E7D4;
  --status-bokad-ink: #6A3E12;
  --status-bekraftad-bg: #C9E0DE;
  --status-bekraftad-ink: #1F4E4C;
  --status-genomford-bg: var(--success-soft);
  --status-genomford-ink: var(--success);
  --status-uteblev-bg: var(--warning-soft);
  --status-uteblev-ink: var(--warning);
  --status-avbokad-bg: #F0E8E4;
  --status-avbokad-ink: #4A3F3C;
  --status-arkiverad-bg: #E7ECEA;
  --status-arkiverad-ink: #3A4C49;

  /* Type */
  --font-display: "Familjen Grotesk", sans-serif;
  --font-text: "Familjen Grotesk", sans-serif;
  --text-sm: 0.9375rem;
  --text-body: 1.0625rem;
  --text-md: 1.328125rem;
  --text-lg: 1.66015625rem;
  --text-h1: clamp(1.66rem, 1.35rem + 1vw, 2.075rem);
  --text-display: clamp(2.05rem, 1.15rem + 2.6vw, 3.05rem);
  --leading-body: 1.55;
  --leading-tight: 1.15;
  --tracking-display: -0.015em;
  --measure: 65ch;

  /* Space: 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: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-control: 0.5rem;
  --radius-card: 0.625rem;
  --radius-chip: 999px;

  /* One shadow, for a raised panel only */
  --shadow-raised: 0 12px 32px oklch(28.7% 0.033 189 / 0.08);

  /* Motion */
  --dur-quick: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.55, 0, .85, .4);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);

  /* Dr. Vansen. Loops pause off screen and stop under reduced motion. */
  --dur-owl-blink: 180ms;
  --dur-owl-talk: 1.1s;
  --dur-owl-hop: 1.5s;
  --dur-owl-wave: 2.4s;
  --dur-owl-breath: 4.2s;

  /* Layers */
  --z-sticky: 10;
  --z-skip: 30;
  --z-chat: 40;
  --z-overlay: 50;

  /* Chat surface. See the chat section in docs/DESIGN.md. */
  --chat-launcher-h: 3rem;
  --chat-launcher-w: 9.5rem;
  --chat-safe-bottom: calc(var(--chat-launcher-h) + 1rem + var(--space-4) + env(safe-area-inset-bottom, 0px));
  --chat-drawer-w: min(26rem, 100vw);
  --chat-column: 45rem;
  --chat-bubble-radius: 18px;
  --chat-bubble-tail: 6px;
  --chat-card-radius: 10px;
  --chat-field-radius: 8px;
  --chat-composer-radius: 22px;
  --chat-control: 44px;
  --chat-agent: oklch(94% 0.006 129);
  --chat-row: oklch(95% 0.006 129);
  --chat-bubble-max: 88%;
  --chat-composer-pad: 4.35rem;
  --perch-w: 4.4rem;
  --perch-h: 6rem;
}

@media (max-width: 1023px) {
  :root { --chat-launcher-w: 9.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}