/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Hestehoj.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  /* ------------------------------------------------------------------ *
   * Icelandic flag brand colours — single source of truth.
   * Every brand/button colour below derives from these two tokens, so
   * re-tuning the palette means editing just these values. See ADR
   * 0001-icelandic-flag-color-system and task 0001.
   * ------------------------------------------------------------------ */
  --iceland-red: oklch(0.573 0.216 21.1);
  --iceland-blue: oklch(0.428 0.146 256.1);
  /* Near-white label text for both hues (contrast verified in task 0005). */
  --iceland-red-foreground: oklch(0.984 0.004 248.2);
  --iceland-blue-foreground: oklch(0.984 0.004 248.2);

  /* Button brand tokens — the hover/focus colour swap (consumed by the
   * button component in task 0002):
   *   primary: red at rest  -> blue on hover/focus
   *   accent:  blue at rest -> red on hover/focus */
  --btn-primary-bg: var(--iceland-red);
  --btn-primary-bg-hover: var(--iceland-blue);
  --btn-primary-foreground: var(--iceland-red-foreground);
  --btn-accent-bg: var(--iceland-blue);
  --btn-accent-bg-hover: var(--iceland-red);
  --btn-accent-foreground: var(--iceland-blue-foreground);

  /* Link colour tokens — used as text colour in rich content (text.twig).
   * Light mode reuses the button hues directly (8.32:1 / 4.93:1 on white).
   * Dark mode uses lighter tints so text-on-dark passes AA (task 0006). */
  --link-color: var(--iceland-blue);
  --link-color-hover: var(--iceland-red);

  /* Error text colour token — for visible error messages and required markers.
   * Separate from --destructive (button bg) so dark mode can lighten text
   * without affecting button contrast. Light: 4.93:1 on white. */
  --error-text: var(--iceland-red);

  /* Base */
  --background: oklch(1 0 0);
  --foreground: oklch(0.137 0.036 258.3);

  --card: oklch(0.984 0.004 248.2);
  --card-foreground: oklch(0.137 0.036 258.3);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.137 0.036 258.3);

  /* Icelandic red as primary (D2: primary = red). */
  --primary: var(--iceland-red);
  --primary-foreground: var(--iceland-red-foreground);

  /* Soft stable-inspired secondary (warm neutral) */
  --secondary: oklch(0.956 0.005 67.5);
  --secondary-foreground: oklch(0.372 0.014 55.9);

  /* Muted surfaces (for subtle panels) */
  --muted: oklch(0.961 0.004 248.2);
  --muted-foreground: oklch(0.556 0.04 256.8);

  /* Icelandic blue as accent (D2: accent = brand blue). Formerly a muted
   * light-blue surface; repointed to the brand token. */
  --accent: var(--iceland-blue);
  --accent-foreground: var(--iceland-blue-foreground);

  /* Icelandic red as destructive/strong accent (aliased to the brand token) */
  --destructive: var(--iceland-red);
  --destructive-foreground: var(--iceland-red-foreground);

  /* Borders & inputs */
  --border: oklch(0.926 0.013 255.1);
  --input: oklch(0.926 0.013 255.1);
  --ring: oklch(0.428 0.146 256.1);

  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px oklch(0 0 0 / 0.05);
  --shadow-xs: 0 1px 3px 1px oklch(0 0 0 / 0.05), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-sm: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.1);
  --shadow: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.1);
  --shadow-md: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 4px 6px -2px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 8px 10px -2px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 12px 14px -3px oklch(0 0 0 / 0.1);
  --shadow-2xl: 0 1px 3px 1px oklch(0 0 0 / 0.1), 0 16px 18px -3px oklch(0 0 0 / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  /* Icelandic flag brand colours for dark surfaces.
   * Red: same value as light mode — lightening it beyond L≈0.573 drops white-text
   * contrast below AA (4.5:1). Still gives 4.05:1 button vs dark bg (>3:1 UI).
   * Blue: slightly lighter for dark-surface visibility; white text = 4.58:1 AA.
   * (Task 0005 contrast check; task 0006 dark-mode reconciliation.) */
  --iceland-red: oklch(0.573 0.216 21.1);
  --iceland-blue: oklch(0.559 0.196 256.8);
  --iceland-red-foreground: oklch(0.984 0.004 248.2);
  --iceland-blue-foreground: oklch(0.984 0.004 248.2);

  --btn-primary-bg: var(--iceland-red);
  --btn-primary-bg-hover: var(--iceland-blue);
  --btn-primary-foreground: var(--iceland-red-foreground);
  --btn-accent-bg: var(--iceland-blue);
  --btn-accent-bg-hover: var(--iceland-red);
  --btn-accent-foreground: var(--iceland-blue-foreground);

  /* Link colour tokens — lightened for dark-bg text legibility.
   * oklch(0.680 0.130 256.1) blue  → 6.91:1 on dark bg (AAA)
   * oklch(0.680 0.150  21.1) red   → 6.46:1 on dark bg (AAA) */
  --link-color: oklch(0.68 0.13 256.1);
  --link-color-hover: oklch(0.68 0.15 21.1);

  /* Error text: same lightened red as --link-color-hover → 6.46:1 on dark bg. */
  --error-text: oklch(0.68 0.15 21.1);

  --background: oklch(0.137 0.036 258.3);
  --foreground: oklch(0.984 0.004 248.2);

  --card: oklch(0.206 0.039 265.6);
  --card-foreground: oklch(0.984 0.004 248.2);

  --popover: oklch(0.206 0.039 265.6);
  --popover-foreground: oklch(0.984 0.004 248.2);

  /* Icelandic red as primary (D2), lighter on dark surfaces. */
  --primary: var(--iceland-red);
  --primary-foreground: var(--iceland-red-foreground);

  --secondary: oklch(0.291 0.018 264.2);
  --secondary-foreground: oklch(0.968 0.007 248.1);

  --muted: oklch(0.291 0.018 264.2);
  --muted-foreground: oklch(0.71 0.035 256.8);

  --destructive: var(--iceland-red);
  --destructive-foreground: var(--iceland-red-foreground);

  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --ring: oklch(0.634 0.196 254.9);

  --accent: var(--iceland-blue);
  --accent-foreground: var(--iceland-blue-foreground);

  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
  --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-md: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 8px 10px -1px oklch(0 0 0 / 0.1);
  --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 12px 14px -1px oklch(0 0 0 / 0.1);
}

/**
 * Language switcher (task 0069, phase 6).
 *
 * Styles the markup from templates/navigation/links--language-block.html.twig.
 * Plain component-scoped CSS on existing theme vars — no build/main.min.css
 * rebuild. Not placed in a region yet; safe to ship ahead of go-live.
 */
.language-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.language-switcher__item a,
.language-switcher__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.language-switcher__item a:hover,
.language-switcher__item a:focus-visible {
  background: var(--primary);
  color: var(--primary-foreground);
}

.language-switcher__item a.is-active,
.language-switcher__item .is-active a,
.language-switcher__current {
  font-weight: 600;
  color: var(--primary);
}