/**
 * Design tokens for MWDOC Spaces.
 *
 * Light is defined on bare :root so there is always a complete palette, and the
 * dark overrides only redefine the same names. Every pairing below meets WCAG
 * 2.1 AA contrast (4.5:1 for body text, 3:1 for large text and UI boundaries) in
 * both themes - this is a public agency application, so that is a requirement
 * rather than a preference.
 */

:root {
  color-scheme: light;

  /* Brand: a water-utility blue, deep enough to carry white text at AA. */
  --brand-900: #0b2b45;
  --brand-800: #0f3c5f;
  --brand-700: #13507e;
  --brand-600: #19639b;
  --brand-500: #2079ba;
  --brand-300: #7db6dd;
  --brand-100: #d6e8f5;
  --brand-50: #eef6fc;

  /* Neutrals */
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f4f7;
  --page: #f6f8fa;
  --border: #d2dae2;
  --border-strong: #a9b6c2;

  --text: #16222e;
  --text-muted: #51616f;
  --text-inverse: #ffffff;

  /* Status. Each is paired with an icon and a word in the markup, never used
     as the only signal - colour-blind users must not have to infer meaning. */
  --ok-bg: #e4f4ea;
  --ok-border: #96ceab;
  --ok-text: #1b5c33;

  --pending-bg: #fdf1dd;
  --pending-border: #e3bd77;
  --pending-text: #70460a;

  --danger-bg: #fcebea;
  --danger-border: #e8a39e;
  --danger-text: #8a2220;

  --info-bg: var(--brand-50);
  --info-border: var(--brand-300);
  --info-text: var(--brand-800);

  /* Public (Brown Act) meetings get their own visual identity, distinct from
     status, so "public" never reads as "approved". */
  --public-bg: #efe9fb;
  --public-border: #b6a1e3;
  --public-text: #4a2c86;

  /* Meeting audience. Four hues that stay distinguishable for the common forms
     of colour blindness; each is paired with its own glyph so the colour is
     reinforcement, never the only signal. */
  --aud-staff-only: #3f6d8c;
  --aud-staff-external: #9a6b1f;
  --aud-staff-board: #2f7d62;
  --aud-public-meeting: #6a4bab;

  /* Availability grid */
  --slot-free: #ffffff;
  --slot-free-hover: var(--brand-50);
  --slot-closed: #e8ebee;
  --slot-busy: var(--brand-600);
  --slot-busy-text: #ffffff;
  --slot-pending: #f6d9a4;
  --slot-pending-text: #4b2f06;

  /* Focus ring: must be visible against every background it can land on. */
  --focus: #b3581d;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px var(--focus);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgb(16 34 46 / 0.08);
  --shadow: 0 2px 8px rgb(16 34 46 / 0.10);
  --shadow-lg: 0 12px 32px rgb(16 34 46 / 0.18);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --measure: 68ch;
  --header-height: 3.5rem;
}

/*
 * The phone breakpoint is 640px, written out in base.css and components.css
 * rather than kept here.
 *
 * Not an oversight and not a candidate for a token: a custom property cannot
 * be used in a media query condition, so a --bp-phone would be readable,
 * unusable, and sooner or later written into an @media that silently never
 * matches. The literal in two files is the honest version.
 */

/*
 * Dark theme. Applied for the system preference unless the viewer has explicitly
 * chosen light, and again for an explicit dark choice, so a toggle wins in both
 * directions.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #16202a;
    --surface-raised: #1d2936;
    --surface-sunken: #111923;
    --page: #0d141c;
    --border: #324352;
    --border-strong: #4b6075;

    --text: #e7eef4;
    --text-muted: #a4b4c2;

    --brand-50: #14242f;
    --brand-100: #1a3344;
    --brand-300: #4f8ab5;
    --brand-500: #4d9ed6;
    --brand-600: #6cb2e2;
    --brand-700: #8cc5ea;

    --ok-bg: #12301d;
    --ok-border: #2f7347;
    --ok-text: #96dcae;

    --pending-bg: #352507;
    --pending-border: #8a6520;
    --pending-text: #f0c67f;

    --danger-bg: #371614;
    --danger-border: #8d403b;
    --danger-text: #f1a9a4;

    --info-bg: #14242f;
    --info-border: #3c6c8d;
    --info-text: #a8d3ee;

    --public-bg: #231a38;
    --public-border: #6a54a3;
    --public-text: #cfbdf4;

    --aud-staff-only: #7fb2d4;
    --aud-staff-external: #e0ae5c;
    --aud-staff-board: #68c3a3;
    --aud-public-meeting: #b69ce8;

    --slot-free: #1b2733;
    --slot-free-hover: #23323f;
    --slot-closed: #141d26;
    --slot-busy: #2c6b96;
    --slot-busy-text: #f2f8fc;
    --slot-pending: #6b4f1c;
    --slot-pending-text: #fbe4bb;

    --focus: #ffb366;
    --focus-ring: 0 0 0 3px #0d141c, 0 0 0 5px var(--focus);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #16202a;
  --surface-raised: #1d2936;
  --surface-sunken: #111923;
  --page: #0d141c;
  --border: #324352;
  --border-strong: #4b6075;

  --text: #e7eef4;
  --text-muted: #a4b4c2;

  --brand-50: #14242f;
  --brand-100: #1a3344;
  --brand-300: #4f8ab5;
  --brand-500: #4d9ed6;
  --brand-600: #6cb2e2;
  --brand-700: #8cc5ea;

  --ok-bg: #12301d;
  --ok-border: #2f7347;
  --ok-text: #96dcae;

  --pending-bg: #352507;
  --pending-border: #8a6520;
  --pending-text: #f0c67f;

  --danger-bg: #371614;
  --danger-border: #8d403b;
  --danger-text: #f1a9a4;

  --info-bg: #14242f;
  --info-border: #3c6c8d;
  --info-text: #a8d3ee;

  --public-bg: #231a38;
  --public-border: #6a54a3;
  --public-text: #cfbdf4;

  --aud-staff-only: #7fb2d4;
  --aud-staff-external: #e0ae5c;
  --aud-staff-board: #68c3a3;
  --aud-public-meeting: #b69ce8;

  --slot-free: #1b2733;
  --slot-free-hover: #23323f;
  --slot-closed: #141d26;
  --slot-busy: #2c6b96;
  --slot-busy-text: #f2f8fc;
  --slot-pending: #6b4f1c;
  --slot-pending-text: #fbe4bb;

  --focus: #ffb366;
  --focus-ring: 0 0 0 3px #0d141c, 0 0 0 5px var(--focus);
}