/**
 * Experience Westport design tokens
 * Source of truth for color, type, space, radius, motion.
 * Components and pages must consume semantic tokens — never raw hex.
 * Hex values are allowed ONLY in this file (primitives + status primitives).
 */

:root {
  /* —— Primitives (Westport brand) —— */
  --ocean-teal: #34647F;
  --ocean-teal-hover: #386D8A;
  --ocean-teal-deep: #284E62;
  --sunset-orange: #F58E2E;
  --sunset-orange-hover: #F6963C;
  --sunset-orange-deep: #EF790B;
  --ink: #131516;
  --ink-soft: #333333;
  --ink-muted: #3E3E3E;
  --paper: #FFFFFF;
  --mist: #E3E4E8;
  --rule: #BBBBBB;
  --inverse: #FFFFFF;
  --overlay-dark: rgba(0, 0, 0, 0.5);

  /* Status primitives (functional only — not tourism brand colors) */
  --status-danger: #8B1E1E;
  --status-danger-bg: #F8E8E8;
  --status-danger-border: #E0B4B4;
  --status-ok: #1F5C3A;
  --status-ok-bg: #E7F4EC;
  --status-ok-border: #B7D8C4;
  --status-warn: #8A5A12;
  --status-warn-bg: #F8EFD8;
  --status-warn-border: #E2C88D;

  /* —— Semantic color —— */
  --color-primary: var(--ocean-teal);
  --color-primary-hover: var(--ocean-teal-hover);
  --color-primary-deep: var(--ocean-teal-deep);
  --color-primary-active: var(--ocean-teal-deep);

  --color-accent: var(--sunset-orange);
  --color-accent-hover: var(--sunset-orange-hover);
  --color-accent-deep: var(--sunset-orange-deep);
  --color-accent-active: var(--sunset-orange-deep);

  --color-bg: var(--paper);
  --color-surface: var(--paper);
  --color-surface-muted: var(--mist);

  --color-text: var(--ink-soft);
  --color-text-strong: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-text-inverse: var(--inverse);

  --color-border: var(--rule);
  --color-focus: var(--ocean-teal);
  --color-overlay: var(--overlay-dark);

  /* QR codes must stay dark-on-light for camera scanning (including dark theme). */
  --color-qr-fg: #131516;
  --color-qr-bg: #FFFFFF;

  --color-on-primary: var(--inverse);
  --color-on-accent: var(--inverse);

  --color-danger: var(--status-danger);
  --color-danger-bg: var(--status-danger-bg);
  --color-danger-border: var(--status-danger-border);
  --color-ok: var(--status-ok);
  --color-ok-bg: var(--status-ok-bg);
  --color-ok-border: var(--status-ok-border);
  --color-warn: var(--status-warn);
  --color-warn-bg: var(--status-warn-bg);
  --color-warn-border: var(--status-warn-border);

  /* Preferred semantic aliases for status */
  --color-success: var(--color-ok);
  --color-success-bg: var(--color-ok-bg);
  --color-success-border: var(--color-ok-border);
  --color-warning: var(--color-warn);
  --color-warning-bg: var(--color-warn-bg);
  --color-warning-border: var(--color-warn-border);

  /* —— Typography —— */
  /* Brand: FatFrank → Oswald (self-hosted; see assets/css/fonts.css) */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  /* Brand: DIN Condensed → Barlow Condensed */
  --font-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Brand: Libre Franklin (exact) */
  --font-body: "Libre Franklin", "Segoe UI", system-ui, sans-serif;

  --font-size-xs: 0.78rem;
  --font-size-sm: 0.88rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.05rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.65rem;
  --font-size-3xl: 2.25rem;

  --line-height-tight: 1.2;
  --line-height-body: 1.55;

  /* —— Spacing scale (rem) —— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* —— Radius / elevation / motion —— */
  --radius-control: 3px;
  --radius: var(--radius-control);
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow: 0 8px 28px color-mix(in srgb, var(--ink) 8%, transparent);

  --transition: 170ms ease;

  --control-min-h: 2.65rem;
  --control-pad-y: 0.55rem;
  --control-pad-x: 0.7rem;
  --touch-target-min: 2.75rem;

  /* —— Breakpoints (documentation reference; use in @media as raw values) —— */
  /* sm: 520px · md: 720px · lg: 900px · xl: 1100px */

  --z-skip: 100;
  --z-header: 50;
  --z-menu: 60;
  --z-overlay: 80;
  --z-dialog: 200;

  /* —— Legacy aliases (deprecated — do not use in new code) —— */
  --sea: var(--color-primary);
  --sea-deep: var(--color-primary-deep);
  --foam: var(--color-surface);
  --paper-2: var(--color-surface-muted);
  --line: var(--color-border);
  --muted: var(--color-text-muted);
  --danger: var(--color-danger);
  --ok: var(--color-ok);
  --warn: var(--color-warn);
  --staff: var(--color-primary-deep);
  --cedar: var(--color-accent-deep);
  --sand: var(--color-accent);
}

/**
 * Dark theme — remaps primitives so semantic tokens resolve correctly.
 * Brand teal/orange stay; surfaces/text invert to cool coastal night tones.
 * Hex allowed here (token file only). Available to all users via header toggle.
 */
html[data-theme="dark"] {
  color-scheme: dark;

  --ink: #F2F3F4;
  --ink-soft: #E3E4E8;
  --ink-muted: #B5B8BD;
  --paper: #15191C;
  --mist: #22282C;
  --rule: #3E464C;
  --inverse: #FFFFFF;
  --overlay-dark: rgba(0, 0, 0, 0.55);

  /* Slightly lifted teal/orange for contrast on dark surfaces */
  --ocean-teal: #4A87A3;
  --ocean-teal-hover: #5A96B0;
  --ocean-teal-deep: #34647F;
  --sunset-orange: #F6963C;
  --sunset-orange-hover: #F8A454;
  --sunset-orange-deep: #F58E2E;

  --status-danger: #F0A8A8;
  --status-danger-bg: #3A1F1F;
  --status-danger-border: #6B3A3A;
  --status-ok: #8FCBAA;
  --status-ok-bg: #1C3226;
  --status-ok-border: #3A5C48;
  --status-warn: #E2C88D;
  --status-warn-bg: #3A3018;
  --status-warn-border: #6B5A2E;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}