/* Futello design tokens (Fable P2.1). Colours already live in application.css (:root --color-*);
   this file adds the spacing, type, radius and elevation scales every component should read. */
:root {
  --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;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-body: 1.55;

  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --elevation-1: 0 1px 2px rgb(16 36 60 / 6%);
  --elevation-2: 0 8px 24px rgb(16 36 60 / 10%);

  --focus-ring: 0 0 0 3px rgb(23 104 213 / 30%);

  /* Form controls: the border of a text field or select at rest (the site's .select-input / .search-input). */
  --color-field-border: #bdcbd9;
}

/* Shared palette established by the approved public homepage. */
:root {
  --ciq-ink: #101f40;
  --ciq-text: #14263f;
  --ciq-muted: #495b73;
  --ciq-mint: #baf3de;
  --ciq-mint-soft: #e7f6ee;
  --ciq-mint-text: #135437;
  --ciq-lavender: #eeebfa;
  --ciq-lavender-text: #4f46a0;
  --ciq-coral: #fdf0e8;
  --ciq-coral-text: #984529;
  --ciq-canvas: #f5f4f0;
  --ciq-border: #dce4ef;
  --ciq-radius: 20px;
  --ciq-hero: radial-gradient(ellipse at 80% 10%, #233b78 0, transparent 60%), #101f40;
  /* Dark-background link tokens (audit 17 Oct. 2026): measured WCAG contrast against #0b1730 (--futello-navy)
     is 10.17:1 at rest (#93c5fd) and 15.86:1 on hover/focus (#dbeafe), well above the 4.5:1 AA threshold
     (replacing #1a73e8 at 3.95:1 and #174f93 at 2.18:1). */
  --ciq-link-on-dark: #93c5fd;
  --ciq-link-on-dark-hover: #dbeafe;

  /* Explorer map tokens (Lots B–D, 20 Oct. 2026): coverage pins, bubbles, clusters, arc, and canvas. */
  --explorer-pin-covered: var(--color-positive);
  --explorer-pin-transfer: var(--color-blue);
  --explorer-pin-short: var(--ciq-coral-text);
  --explorer-pin-unknown: var(--color-muted);
  --explorer-pin-sold: var(--color-text-secondary);
  --explorer-pin-stroke: var(--color-surface);
  --explorer-pin-highlight: var(--color-navy);
  --explorer-cluster-bg: var(--color-blue-dark);
  --explorer-cluster-text: var(--color-surface);
  --explorer-arc-color: var(--color-blue);
  --explorer-map-bg: var(--color-surface-alt);
  --explorer-map-dark-land: var(--color-navy-soft);
  --explorer-map-dark-water: var(--color-navy);
  --explorer-map-dark-border: var(--color-muted);
  --explorer-map-dark-text: var(--ciq-link-on-dark);
  --explorer-bubble-bg: var(--color-surface);
  --explorer-bubble-text: var(--color-navy);
  --explorer-bubble-border: var(--color-border);
}

:root[data-theme="dark"],
body[data-theme="dark"],
:root.dark,
body.dark,
:root.theme-dark,
body.theme-dark {
  --explorer-pin-stroke: var(--color-navy);
  --explorer-pin-highlight: var(--color-surface);
  --explorer-arc-color: var(--ciq-link-on-dark);
  --explorer-map-bg: var(--color-navy);
  --explorer-bubble-bg: var(--color-navy-soft);
  --explorer-bubble-text: var(--color-surface);
  --explorer-bubble-border: var(--color-muted);
}