/* ==========================================================================
   Design tokens
   Every colour, size, radius, shadow, z-index and motion value used by the
   stylesheets is defined here. Component files only reference tokens.
   ========================================================================== */
:root {
  /* --- Colour: brand --- */
  --primary-900: #383E54;
  --primary-700: #2D3748;
  --primary-500: #4A5568;
  --primary-100: #EDF2F7;

  /* --- Colour: accent (teal scale) --- */
  --accent-700: #005F8A;
  --accent-600: #0077B6;
  --accent-500: #0096C7;
  --accent-400: #00B4D8;
  --accent-300: #48CAE4;
  --accent-200: #90E0EF;
  --accent-100: #CAF0F8;
  --accent-50: #E0F7FA;

  /* --- Colour: neutrals --- */
  --neutral-900: #111827;
  --neutral-800: #1F2937;
  --neutral-700: #374151;
  --neutral-600: #4B5563;
  --neutral-500: #6B7280;
  --neutral-400: #8891A0;
  --neutral-300: #B0B8C4;
  --neutral-200: #D1D5DB;
  --neutral-100: #F1F5F9;
  --neutral-50: #FFFFFF;

  /* --- Colour: priority scale (value 0..3 and null, see js/config.js) ---
     0 high = red, 1 normal = green, 2 low = blue, 3 none = grey, null = outlined grey */
  --priority-high: #DC2626;
  --priority-high-bg: #FEE2E2;
  --priority-high-text: #B91C1C;
  --priority-normal: #10B981;
  --priority-normal-bg: #D1FAE5;
  --priority-normal-text: #047857;
  --priority-low: #3B82F6;
  --priority-low-bg: #DBEAFE;
  --priority-low-text: #1D4ED8;
  --priority-none: #9CA3AF;
  --priority-none-bg: #F3F4F6;
  --priority-none-text: #6B7280;
  --priority-null: #D1D5DB;
  --priority-null-bg: #F9FAFB;
  --priority-null-text: #9CA3AF;
  --priority-null-border: #E5E7EB;

  /* --- Colour: semantic status (reuse the scales above) --- */
  --color-success: var(--priority-normal-text);
  --color-success-bg: var(--priority-normal-bg);
  --color-info: var(--accent-600);
  --color-info-bg: var(--accent-100);
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-warning-accent: #F59E0B;   /* prototype banner */
  --color-danger: var(--priority-high-text);
  --color-danger-bg: var(--priority-high-bg);
  --color-star: #FFC107;
  --color-star-empty: var(--neutral-300);

  /* --- Colour: overlays and translucent controls --- */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-bg-dark: rgba(0, 0, 0, 0.95);
  --overlay-control-bg: rgba(255, 255, 255, 0.1);
  --overlay-control-bg-hover: rgba(255, 255, 255, 0.25);
  --accent-overlay-bg: rgba(0, 119, 182, 0.85);
  --accent-overlay-bg-hover: rgba(0, 119, 182, 0.95);

  /* --- Typography --- */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;
  --font-size-6xl: 40px;
  --font-size-7xl: 48px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Layout --- */
  --page-max-width: 1440px;
  --page-gutter: var(--space-6);        /* horizontal page padding (16px on phones, see below) */
  --panel-padding: var(--space-6);      /* inner padding of content panels (16px on phones) */
  --header-height: 68px;
  --map-sidebar-width: 320px;
  --wizard-sidebar-width: 280px;
  --media-height-card: 180px;
  --media-height-sidebar: 160px;
  --media-height-popup: 120px;
  --media-height-hero: 420px;
  --control-size: var(--space-9);       /* icon buttons */
  --touch-target: 44px;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-marker: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-marker-selected: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 119, 182, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);

  /* --- Interactive states --- */
  --state-hover-bg: #F7FAFC;
  --state-focus-ring: 0 0 0 3px rgba(0, 119, 182, 0.2);
  --state-error-border: var(--priority-high);
  --state-error-ring: 0 0 0 3px rgba(220, 38, 38, 0.15);
  --state-error-bg: rgba(220, 38, 38, 0.03);

  /* --- Motion --- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* --- Stacking --- */
  --z-raised: 2;          /* tags over images, controls over tracks */
  --z-dropdown: 100;
  --z-modal: 1000;        /* filter dialog */
  --z-dialog: 2000;       /* dialogs and the image carousel */
  --z-skip-link: 9999;
}

/* Tighter gutters on phones so content gets the width instead of the margins */
@media (max-width: 640px) {
  :root {
    --page-gutter: var(--space-4);
    --panel-padding: var(--space-4);
  }
}