/*
 * The website's design tokens: the one owner of every colour, size, radius,
 * shadow and layer the design system uses (docs/design-system.md, spec
 * docs/superpowers/specs/2026-11-09-website-design-system-design.md).
 *
 * Two tiers, as in fmo3's src/css/base/_variables.css:
 *   --palette-*  raw values. They live HERE and nowhere else, and nothing
 *                outside this file reads them.
 *   everything   semantic roles (--color-text-primary, --radius-card, ...).
 *   else         Stylesheets read these, never a raw value.
 *
 * The palette's shared values are fmo3's, hex for hex, so the website and
 * MapWise Explorer read as one product. Where the two differ on purpose
 * (the ground colour, the accent tint --palette-mint-100, the body size) the
 * role says why.
 *
 * Dark mode (spec D11) is the .dark-mode rule at the end: the class My
 * Account's toggle puts on <body>, or on any element whose content should be
 * dark. It remaps roles to the palette and declares nothing new, so a
 * component needs no dark rules of its own.
 *
 * This file holds custom properties on :root and .dark-mode and nothing else,
 * so loading it changes nothing on a page until a stylesheet reads a token
 * (DesignTokensTest).
 */
:root {
  /* ── Palette. An -rgb triplet shadows its hex where a shadow needs rgba()
   * (DesignTokensTest keeps each pair equal). Roles read the palette
   * directly, never another role, so dark mode can remap any of them. */
  --palette-white: #ffffff;
  --palette-navy-950: #011641;
  --palette-navy-900: #011e61;
  --palette-navy-900-rgb: 1, 30, 97;
  --palette-navy-700: #1b3a6b;
  --palette-navy-100: #d9e8f5;
  --palette-navy-50: #ebf4fa;
  --palette-blue-800: #084298;
  --palette-blue-700: #0a58ca;
  --palette-blue-600: #0d6efd;
  --palette-blue-600-rgb: 13, 110, 253;
  --palette-blue-50: #e7f0ff;
  --palette-green-800: #155c38;
  --palette-green-700: #146c43;
  --palette-green-650: #157347; /* Bootstrap 5's success hover; between green 700 and 600 */
  --palette-green-600: #198754;
  --palette-green-400: #75c9a2;
  --palette-mint-100: #dbede6; /* website-only: fmo3's green-100 is #dff0d8 */
  --palette-green-50: #e8f4ee;
  --palette-red-800: #8e2230;
  --palette-red-700: #b02a37;
  --palette-red-50: #fbecee;
  --palette-amber-800: #7a5800;
  --palette-amber-700: #b07d00;
  --palette-amber-50: #fff7df;
  --palette-ink-900: #14203a;
  --palette-ink-700: #3b4658;
  --palette-ink-600: #5b6678;
  --palette-ink-500: #6b7586;
  --palette-ink-400: #8b95a5;
  --palette-line-300: #cdd6e0;
  --palette-line-200: #e3e8ef;
  --palette-fill-100: #f1f4f8;
  --palette-fill-50: #f8fafc;
  --palette-black: #000000;
  --palette-black-rgb: 0, 0, 0;

  /* Dark mode's palette: the slate members.css's dark theme already uses
   * (#0f172a, #1e293b, #334155, #e8eaed, #b8bcc4, #e3f2fd), with the tints and
   * lighter blues it needs to clear WCAG AA. Named night-* so no one reads them
   * as Tailwind's slate scale, whose steps differ. */
  --palette-night-900: #0f172a;
  --palette-night-850: #131d33;
  --palette-night-800: #1e293b;
  --palette-night-750: #273449;
  --palette-night-700: #334155;
  --palette-night-600: #475569;
  --palette-night-500: #748297;
  --palette-night-400: #9aa3b2;
  --palette-night-300: #b8bcc4;
  --palette-night-100: #e8eaed;
  --palette-sky-50: #e3f2fd;
  --palette-sky-300: #aecbfa;
  --palette-sky-400: #8ab4f8;
  --palette-blue-400: #60a5fa;
  --palette-blue-400-rgb: 96, 165, 250;
  --palette-blue-500: #3d6fd1;
  --palette-blue-550: #2f62c7;
  --palette-blue-650: #2a56ad;
  --palette-indigo-900: #1e3a5f;
  --palette-indigo-800: #2c4a75;
  --palette-green-950: #14301f;
  --palette-green-900: #16362a;
  --palette-red-950: #3b1c22;
  --palette-red-300: #f4a3ab;
  --palette-amber-950: #3a2f0b;
  --palette-amber-300: #fdd663;

  /* ── Brand. */
  --color-primary: var(--palette-navy-900);
  --color-primary-hover: var(--palette-navy-700);
  --color-primary-active: var(--palette-navy-950);
  --color-text-on-primary: var(--palette-white);
  /* Brand-coloured text and icons (tonal, outline and ghost buttons, the brand
   * badge, a selected chip). Navy here; dark mode lightens it, since
   * --color-primary is a fill and fails as text there. */
  --color-primary-text: var(--palette-navy-900);
  /* The site header and footer: navy in both themes. */
  --color-header: var(--palette-navy-900);
  /* A control on the header, hovered (navy in both themes, as the header). */
  --color-header-hover: var(--palette-navy-700);
  /* MapWise green: the logo's, and the accent the plans and API pages use. */
  --color-accent: var(--palette-green-800);
  --color-accent-bg: var(--palette-mint-100);
  --color-accent-on-dark: var(--palette-green-400);
  /* Code shown on the navy header colour (the home page's API response): the same in both themes. */
  --color-code-key: var(--palette-sky-400);
  --color-code-string: var(--palette-green-400);
  --color-code-number: var(--palette-amber-300);
  --color-code-muted: var(--palette-night-400);
  /* The free-trial button (decided 2026-11-09): Bootstrap 5's success green,
   * which the site's trial buttons already wear, with Bootstrap's own hover and
   * pressed shades. A website-only role: fmo3's main action is navy. It is
   * for signing up only; everywhere else green still means success. */
  --color-cta: var(--palette-green-600);
  --color-cta-hover: var(--palette-green-650);
  --color-cta-active: var(--palette-green-700);

  /* ── Surfaces. The website's ground is the help redesign's light blue
   * (#ebf4fa, help spec 2026-10-25), where fmo3's is a grey: a page of white
   * cards on it reads as MapWise's site rather than the app. */
  --color-surface: var(--palette-white);
  --color-ground: var(--palette-navy-50);
  --color-ground-neutral: var(--palette-fill-100);
  --color-ground-subtle: var(--palette-fill-50);
  --color-selected: var(--palette-navy-50);
  --color-selected-border: var(--palette-navy-100);
  --color-hover-fill: var(--palette-fill-100);

  /* ── Text. Every text role clears 4.5:1 on surface, ground and selected
   * (DesignTokensTest), except the placeholder, which sits in white fields
   * only (4.18:1 on the ground). Ink 400 and lighter never colour text. */
  --color-text-primary: var(--palette-ink-900);
  --color-text-secondary: var(--palette-ink-700);
  --color-text-muted: var(--palette-ink-600);
  --color-placeholder: var(--palette-ink-500);
  --color-heading: var(--palette-navy-900);
  --color-link: var(--palette-blue-700);
  --color-link-hover: var(--palette-blue-800);

  /* ── Lines and focus. Borders a reader must see clear 3:1; dividers are
   * decoration and need not. */
  --color-border: var(--palette-line-200);
  --color-border-strong: var(--palette-line-300);
  --color-border-control: var(--palette-ink-400);
  --color-focus: var(--palette-blue-600);

  /* ── Status: a text colour and the tint it sits on. */
  --color-success-text: var(--palette-green-700);
  --color-success-bg: var(--palette-green-50);
  --color-success: var(--palette-green-600);
  --color-danger: var(--palette-red-700);
  /* A destructive button's fill and its hover. Error text is --color-danger,
   * which dark mode lightens; the fill stays red so white text stays legible. */
  --color-danger-fill: var(--palette-red-700);
  --color-danger-hover: var(--palette-red-800);
  --color-danger-bg: var(--palette-red-50);
  --color-warning-text: var(--palette-amber-800);
  --color-warning-bg: var(--palette-amber-50);
  --color-warning: var(--palette-amber-700);
  --color-info-bg: var(--palette-blue-50);

  /* ── Content on navy (the site header and footer). */
  --color-on-dark: var(--palette-white);

  /* ── Type. One family, Open Sans, as fmo3. The website's body is 16px,
   * Bootstrap's default, where fmo3's dense panels are 14px; the names match
   * fmo3's so a component reads the same token in both. */
  --font-family-sans: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-size-2xs: 0.6875rem; /* 11px: code samples on phones */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px: body */
  --font-size-lg: 1.125rem; /* 18px: lead */
  --font-size-xl: 1.375rem; /* 22px: h3 */
  --font-size-2xl: 1.75rem; /* 28px: h2 */
  --font-size-3xl: 2.25rem; /* 36px: h1 */
  --font-size-4xl: 3rem; /* 48px: a marketing hero */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --measure: 70ch; /* the longest line running prose may take */

  /* ── Space: a 4px step. */
  --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;

  /* ── Shape and depth (fmo3's values). */
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-surface: 14px;
  --radius-chip: 999px;
  --border-width: 1px; /* a hairline: card and control borders, mw-list dividers */
  --shadow-sm: 0 1px 2px rgba(var(--palette-navy-900-rgb), 0.1);
  --shadow: 0 6px 16px rgba(var(--palette-navy-900-rgb), 0.14);
  --shadow-lg: 0 18px 44px rgba(var(--palette-navy-900-rgb), 0.24);
  --shadow-focus: 0 0 0 0.25rem rgba(var(--palette-blue-600-rgb), 0.25);

  /* ── Touch and layers (Bootstrap 5's z-index scale). A control is 36px
   * (30px small), fmo3's sizes; one tapped often grows to --tap-target on a
   * coarse pointer (mw-btn--touch). */
  --tap-target: 44px;
  --control-height: 2.25rem;
  --control-height-sm: 1.875rem;
  --z-raised: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* Dark mode (spec D11). Every pair is checked by DesignTokensTest in both
 * themes. What stays the same: the header and footer navy, the free-trial
 * green, white text on fills, and the destructive button's red. */
.dark-mode {
  --color-surface: var(--palette-night-800);
  --color-ground: var(--palette-night-900);
  --color-ground-neutral: var(--palette-night-750);
  --color-ground-subtle: var(--palette-night-850);
  --color-selected: var(--palette-indigo-900);
  --color-selected-border: var(--palette-indigo-800);
  --color-hover-fill: var(--palette-night-750);

  --color-text-primary: var(--palette-night-100);
  --color-text-secondary: var(--palette-night-300);
  --color-text-muted: var(--palette-night-400);
  --color-placeholder: var(--palette-night-400);
  --color-heading: var(--palette-sky-50);
  --color-link: var(--palette-sky-400);
  --color-link-hover: var(--palette-sky-300);

  --color-border: var(--palette-night-700);
  --color-border-strong: var(--palette-night-600);
  --color-border-control: var(--palette-night-500);
  --color-focus: var(--palette-blue-400);

  /* Navy disappears on dark slate (1.06:1 on a card), so a primary button is a lighter
   * brand blue that keeps white text (4.78:1) and an edge (3.06:1). */
  --color-primary: var(--palette-blue-500);
  --color-primary-hover: var(--palette-blue-550);
  --color-primary-active: var(--palette-blue-650);
  --color-primary-text: var(--palette-sky-300);

  --color-accent: var(--palette-green-400);
  --color-accent-bg: var(--palette-green-900);
  --color-success-text: var(--palette-green-400);
  --color-success-bg: var(--palette-green-950);
  --color-danger: var(--palette-red-300);
  --color-danger-bg: var(--palette-red-950);
  --color-warning: var(--palette-amber-300);
  --color-warning-text: var(--palette-amber-300);
  --color-warning-bg: var(--palette-amber-950);
  --color-info-bg: var(--palette-indigo-900);

  --shadow-sm: 0 1px 2px rgba(var(--palette-black-rgb), 0.4);
  --shadow: 0 6px 16px rgba(var(--palette-black-rgb), 0.5);
  --shadow-lg: 0 18px 44px rgba(var(--palette-black-rgb), 0.6);
  --shadow-focus: 0 0 0 0.25rem rgba(var(--palette-blue-400-rgb), 0.35);
}