/* Generated by docs/website/brand/app-tokens.py from docs/website/design-system.md. Do not edit. */

/* The design system's tokens (section 6, "Tokens as code") as plain custom properties for
   WhistleSafe and SafeSpace, with the app's own roles (2.3); the comments in :root are
   section 6's. The MudBlazor theme (WebApp/Theme/BrandTokens.g.cs) reads them through
   var(), so this file loads before MudBlazor's stylesheet (ADR app-001). */

:root {
  /* Logo colours, exact. Illustration and the mark; navy is also light ink. */
  --color-navy: oklch(0.189 0.074 271.5);
  --color-blue: oklch(0.586 0.211 268.6);
  --color-periwinkle: oklch(0.794 0.095 276.1);
  --color-mist: oklch(0.947 0.024 280.9);

  /* Neutral ramp: navy-tinted grey. Illustrations and charts; components use the roles below. */
  --color-neutral-0: oklch(1 0 0);
  --color-neutral-50: oklch(0.975 0.010 277);
  --color-neutral-100: oklch(0.965 0.012 277);
  --color-neutral-200: oklch(0.910 0.018 277);
  --color-neutral-300: oklch(0.800 0.030 275);
  --color-neutral-400: oklch(0.690 0.035 274);
  --color-neutral-500: oklch(0.580 0.035 272);
  --color-neutral-600: oklch(0.450 0.045 272);
  --color-neutral-700: oklch(0.330 0.045 272);
  --color-neutral-800: oklch(0.245 0.052 272);
  --color-neutral-850: oklch(0.215 0.050 272);
  --color-neutral-900: oklch(0.185 0.045 272);
  --color-neutral-950: oklch(0.160 0.040 272);

  /* Surfaces and ink */
  --color-canvas: light-dark(oklch(1 0 0), oklch(0.185 0.045 272));
  --color-band: light-dark(oklch(0.975 0.010 277), oklch(0.215 0.050 272));
  --color-surface: light-dark(oklch(1 0 0), oklch(0.245 0.052 272));
  --color-sunken: light-dark(oklch(0.965 0.012 277), oklch(0.160 0.040 272));
  --color-ink: light-dark(oklch(0.189 0.074 271.5), oklch(0.965 0.012 277));
  --color-ink-muted: light-dark(oklch(0.450 0.045 272), oklch(0.800 0.030 275));
  --color-rule: light-dark(oklch(0.910 0.018 277), oklch(0.330 0.045 272));
  --color-edge: light-dark(oklch(0.580 0.035 272), oklch(0.580 0.035 272));

  /* Accent: WhistleSafe by default; [data-brand] below remaps it */
  --color-accent: light-dark(oklch(0.586 0.211 268.6), oklch(0.700 0.150 272));
  --color-accent-strong: light-dark(oklch(0.510 0.230 267), oklch(0.794 0.095 276.1));
  --color-accent-hover: light-dark(oklch(0.450 0.210 267), oklch(0.840 0.075 276));
  --color-accent-soft: light-dark(oklch(0.947 0.024 280.9), oklch(0.285 0.080 272));
  --color-on-accent: light-dark(oklch(1 0 0), oklch(0.189 0.074 271.5));
  --color-focus: light-dark(oklch(0.510 0.230 267), oklch(0.794 0.095 276.1));

  /* States */
  --color-success: light-dark(oklch(0.480 0.120 150), oklch(0.800 0.130 152));
  --color-success-soft: light-dark(oklch(0.960 0.035 152), oklch(0.270 0.050 155));
  --color-warning: light-dark(oklch(0.500 0.105 68), oklch(0.830 0.120 80));
  --color-warning-soft: light-dark(oklch(0.960 0.040 85), oklch(0.280 0.050 72));
  --color-danger: light-dark(oklch(0.520 0.185 27), oklch(0.770 0.120 25));
  --color-danger-soft: light-dark(oklch(0.960 0.018 20), oklch(0.285 0.070 25));
  --color-info: light-dark(oklch(0.500 0.120 245), oklch(0.800 0.090 240));
  --color-info-soft: light-dark(oklch(0.960 0.020 240), oklch(0.280 0.050 245));

  /* The app's own roles (2.3, the app table): disabled text, table rows, loading placeholders */
  --color-ink-disabled: light-dark(oklch(0.690 0.035 274), oklch(0.580 0.035 272));
  --color-table-hover: light-dark(oklch(0.965 0.012 277), oklch(0.330 0.045 272));
  --color-table-striped: light-dark(oklch(0.975 0.010 277), oklch(0.215 0.050 272));
  --color-skeleton: light-dark(oklch(0.910 0.018 277), oklch(0.330 0.045 272));

  /* Type */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-sm: 0.9375rem;
  --text-sm--line-height: 1.5;
  --text-base: clamp(1rem, 0.9511rem + 0.217vw, 1.125rem);
  --text-base--line-height: 1.6;
  --text-lg: clamp(1.125rem, 1.0516rem + 0.326vw, 1.3125rem);
  --text-lg--line-height: 1.55;
  --text-xl: clamp(1.25rem, 1.1522rem + 0.435vw, 1.5rem);
  --text-xl--line-height: 1.35;
  --text-xl--letter-spacing: -0.01em;
  --text-2xl: clamp(1.5rem, 1.3533rem + 0.652vw, 1.875rem);
  --text-2xl--line-height: 1.25;
  --text-2xl--letter-spacing: -0.015em;
  --text-3xl: clamp(1.75rem, 1.4565rem + 1.304vw, 2.5rem);
  --text-3xl--line-height: 1.15;
  --text-3xl--letter-spacing: -0.02em;
  --text-4xl: clamp(2.125rem, 1.6359rem + 2.174vw, 3.375rem);
  --text-4xl--line-height: 1.1;
  --text-4xl--letter-spacing: -0.022em;
  --text-5xl: clamp(2.5rem, 1.8152rem + 3.043vw, 4.25rem);
  --text-5xl--line-height: 1.05;
  --text-5xl--letter-spacing: -0.022em;

  /* Space and layout: Tailwind's 4 px step (p-4 = 16 px) */
  --spacing: 0.25rem;
  --container-narrow: 32rem;
  --container-reading: 36rem;
  --container-page: 76rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Elevation: used through the elevation-* utilities, never shadow-* */
  --elevation-color: light-dark(oklch(0.189 0.074 271.5 / 0.08), oklch(0 0 0 / 0.45));
  --elevation-1: 0 1px 2px 0 var(--elevation-color);
  --elevation-2: 0 1px 2px 0 var(--elevation-color), 0 4px 12px -2px var(--elevation-color);
  --elevation-3: 0 2px 4px 0 var(--elevation-color), 0 16px 40px -8px var(--elevation-color);

  /* The backdrop behind a modal dialog: a transparency, so a token of its own (2.3, 5.3) */
  --scrim-color: light-dark(oklch(0.189 0.074 271.5 / 0.4), oklch(0 0 0 / 0.6));

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --press: 0px;
}

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

[data-brand="safespace"] {
  --color-accent: light-dark(oklch(0.650 0.160 48), oklch(0.780 0.120 55));
  --color-accent-strong: light-dark(oklch(0.530 0.145 46), oklch(0.820 0.095 58));
  --color-accent-hover: light-dark(oklch(0.470 0.130 46), oklch(0.870 0.075 58));
  --color-accent-soft: light-dark(oklch(0.960 0.024 60), oklch(0.290 0.050 45));
  --color-on-accent: light-dark(oklch(1 0 0), oklch(0.189 0.074 271.5));
  --color-focus: light-dark(oklch(0.530 0.145 46), oklch(0.820 0.095 58));
}

/* Print uses the light theme, whatever the theme switch says (2.6). */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
  }
}

/* Browsers without light-dark() (Chrome before 123, Safari before 17.5) get the light theme
   (2.6): every light-dark() token's Light value. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --color-canvas: oklch(1 0 0);
    --color-band: oklch(0.975 0.010 277);
    --color-surface: oklch(1 0 0);
    --color-sunken: oklch(0.965 0.012 277);
    --color-ink: oklch(0.189 0.074 271.5);
    --color-ink-muted: oklch(0.450 0.045 272);
    --color-rule: oklch(0.910 0.018 277);
    --color-edge: oklch(0.580 0.035 272);
    --color-accent: oklch(0.586 0.211 268.6);
    --color-accent-strong: oklch(0.510 0.230 267);
    --color-accent-hover: oklch(0.450 0.210 267);
    --color-accent-soft: oklch(0.947 0.024 280.9);
    --color-on-accent: oklch(1 0 0);
    --color-focus: oklch(0.510 0.230 267);
    --color-success: oklch(0.480 0.120 150);
    --color-success-soft: oklch(0.960 0.035 152);
    --color-warning: oklch(0.500 0.105 68);
    --color-warning-soft: oklch(0.960 0.040 85);
    --color-danger: oklch(0.520 0.185 27);
    --color-danger-soft: oklch(0.960 0.018 20);
    --color-info: oklch(0.500 0.120 245);
    --color-info-soft: oklch(0.960 0.020 240);
    --color-ink-disabled: oklch(0.690 0.035 274);
    --color-table-hover: oklch(0.965 0.012 277);
    --color-table-striped: oklch(0.975 0.010 277);
    --color-skeleton: oklch(0.910 0.018 277);
    --elevation-color: oklch(0.189 0.074 271.5 / 0.08);
    --scrim-color: oklch(0.189 0.074 271.5 / 0.4);
  }
  [data-brand="safespace"] {
    --color-accent: oklch(0.650 0.160 48);
    --color-accent-strong: oklch(0.530 0.145 46);
    --color-accent-hover: oklch(0.470 0.130 46);
    --color-accent-soft: oklch(0.960 0.024 60);
    --color-on-accent: oklch(1 0 0);
    --color-focus: oklch(0.530 0.145 46);
  }
}