/*!
 * AgensTown Design System - CSS custom properties
 * Version 2.0.0 - GENERATED FILE, DO NOT EDIT BY HAND.
 * Regenerate with: python DesignSystem/tools/build_tokens.py
 *
 * Source of truth: DesignSystem/tokens/agenstown-tokens.json
 * Colour maths:    DesignSystem/tools/color_lab.py (OKLCH, sRGB gamut mapping, WCAG 2 contrast)
 *
 * LAYERS
 *   1. :root                            global primitives (palettes, type, space, radius, motion, z-index)
 *   2. [data-theme="light"], :root      light semantic set - the default
 *   3. [data-theme="dark"]              dark semantic set - opt in with an attribute
 *   4. @media (prefers-color-scheme)    the same dark set for people who never touch the switch
 *   5. @media (color-gamut: p3)         extra chroma for the logo glow, the sweep and the primary fill
 *
 * Every colour is declared twice: a hex fallback, then the canonical oklch().
 * A browser without oklch() support keeps the hex; every other browser takes the
 * wide-gamut value. The two are the same colour - the hex is produced from the
 * oklch value by color_lab, never typed by hand.
 *
 * HUE: 262 for every blue and every neutral (neutral chroma <= 0.012).
 * Status hues: success 150, warning 75, danger 25, information = brand blue.
 *
 * WCAG 2.2 AA - computed at build time, every pair below is verified:
 *   (ratio / minimum; 4.5:1 for text, 3:1 for large text and graphical objects)
 *
 *   OK   light color.text             on elevation.surface                       18.12:1 / 4.5  body text
 *   OK   light color.text.subtle      on elevation.surface                        9.20:1 / 4.5  secondary text
 *   OK   light color.text.subtlest    on elevation.surface                        6.82:1 / 4.5  tertiary text
 *   OK   light color.text.disabled    on elevation.surface                        3.65:1 / 3.0  disabled label (WCAG-exempt; 3:1 self-imposed)
 *   OK   light color.text.brand       on elevation.surface                        7.01:1 / 4.5  brand text
 *   OK   light color.text.selected    on elevation.surface                        7.01:1 / 4.5  selected item label
 *   OK   light color.text.danger      on elevation.surface                        7.44:1 / 4.5  error text
 *   OK   light color.text.warning     on elevation.surface                        6.96:1 / 4.5  warning text
 *   OK   light color.text.success     on elevation.surface                        6.42:1 / 4.5  success text
 *   OK   light color.text.information on elevation.surface                        7.01:1 / 4.5  information text
 *   OK   light color.link             on elevation.surface                        7.01:1 / 4.5  link
 *   OK   light color.link.pressed     on elevation.surface                        9.42:1 / 4.5  link pressed
 *   OK   light color.icon             on elevation.surface                       18.12:1 / 4.5  icon (3:1 required, 4.5:1 achieved)
 *   OK   light color.icon.subtlest    on elevation.surface                        6.82:1 / 4.5  decorative icon
 *   OK   light color.border.bold      on elevation.surface                        6.82:1 / 3.0  meaningful border (WCAG 1.4.11)
 *   OK   light color.border.input     on elevation.surface                        5.05:1 / 3.0  input outline (WCAG 1.4.11)
 *   OK   light color.border.focused   on elevation.surface                        5.22:1 / 3.0  focus ring (WCAG 1.4.11)
 *   OK   light color.chart.brand      on elevation.surface                        5.22:1 / 3.0  chart series (graphical object)
 *   OK   light brand.logo.agens       on elevation.surface                        7.03:1 / 4.5  logo word Agens
 *   OK   light brand.logo.town        on elevation.surface                       18.18:1 / 4.5  logo word Town
 *   OK   light color.text             on elevation.surface.raised                18.12:1 / 4.5  text on a card
 *   OK   light color.text             on elevation.surface.overlay               18.12:1 / 4.5  text in a modal
 *   OK   light color.text             on elevation.surface.sunken                16.12:1 / 4.5  text in a sunken well
 *   OK   light color.text             on color.background.neutral                14.32:1 / 4.5  text on a neutral fill
 *   OK   light color.text.subtle      on color.background.neutral                 7.27:1 / 4.5  secondary text on a neutral fill
 *   OK   light color.text.subtlest    on color.background.neutral                 5.39:1 / 4.5  tertiary text on a neutral fill
 *   OK   light color.text             on color.background.neutral.hovered        11.83:1 / 4.5  text on neutral fill, hover
 *   OK   light color.text             on color.background.neutral.pressed         9.08:1 / 4.5  text on neutral fill, pressed
 *   OK   light color.text             on color.background.neutral.subtle         16.12:1 / 4.5  text on a zebra row
 *   OK   light color.text.inverse     on color.background.neutral.bold            9.20:1 / 4.5  label on a solid neutral fill
 *   OK   light color.text.inverse     on color.background.brand.bold              7.01:1 / 4.5  primary button label
 *   OK   light color.text.inverse     on color.background.brand.bold.hovered      9.42:1 / 4.5  primary button label, hover
 *   OK   light color.text.inverse     on color.background.brand.bold.pressed     12.33:1 / 4.5  primary button label, pressed
 *   OK   light color.text.brand       on color.background.brand.subtlest          6.23:1 / 4.5  brand text on a brand tint
 *   OK   light color.text             on color.background.brand.subtlest         16.10:1 / 4.5  body text on a brand tint
 *   OK   light color.text.selected    on color.background.selected                6.23:1 / 4.5  selected row label
 *   OK   light color.text             on color.background.input                  18.12:1 / 4.5  typed value in a field
 *   OK   light color.text.subtlest    on color.background.input                   6.82:1 / 4.5  placeholder text
 *   OK   light color.text.disabled    on color.background.disabled                3.25:1 / 3.0  disabled field text (WCAG-exempt)
 *   OK   light color.text.danger      on color.background.danger                  6.57:1 / 4.5  error banner text
 *   OK   light color.text.success     on color.background.success                 5.73:1 / 4.5  success banner text
 *   OK   light color.text.warning     on color.background.warning                 6.17:1 / 4.5  warning banner text
 *   OK   light color.text.information on color.background.information             6.23:1 / 4.5  information banner text
 *   OK   light color.text.inverse     on color.background.danger.bold             5.58:1 / 4.5  destructive button label
 *   OK   light color.text.inverse     on color.background.success.bold            4.75:1 / 4.5  solid success badge label
 *   OK   light color.text.inverse     on color.background.information.bold        7.01:1 / 4.5  solid information badge label
 *   OK   light color.text.inverse     on color.background.inverse.subtle         13.76:1 / 4.5  tooltip text
 *   OK   light color.text             on color.background.warning.bold            6.64:1 / 4.5  label on a solid warning fill - yellow always takes dark ink
 *   OK   dark  color.text             on elevation.surface                       18.82:1 / 4.5  body text
 *   OK   dark  color.text.subtle      on elevation.surface                       12.85:1 / 4.5  secondary text
 *   OK   dark  color.text.subtlest    on elevation.surface                        7.38:1 / 4.5  tertiary text
 *   OK   dark  color.text.disabled    on elevation.surface                        3.90:1 / 3.0  disabled label (WCAG-exempt; 3:1 self-imposed)
 *   OK   dark  color.text.brand       on elevation.surface                        7.28:1 / 4.5  brand text
 *   OK   dark  color.text.selected    on elevation.surface                        7.28:1 / 4.5  selected item label
 *   OK   dark  color.text.danger      on elevation.surface                        6.77:1 / 4.5  error text
 *   OK   dark  color.text.warning     on elevation.surface                        7.21:1 / 4.5  warning text
 *   OK   dark  color.text.success     on elevation.surface                        7.91:1 / 4.5  success text
 *   OK   dark  color.text.information on elevation.surface                        7.28:1 / 4.5  information text
 *   OK   dark  color.link             on elevation.surface                        7.28:1 / 4.5  link
 *   OK   dark  color.link.pressed     on elevation.surface                        9.74:1 / 4.5  link pressed
 *   OK   dark  color.icon             on elevation.surface                       18.82:1 / 4.5  icon (3:1 required, 4.5:1 achieved)
 *   OK   dark  color.icon.subtlest    on elevation.surface                        7.38:1 / 4.5  decorative icon
 *   OK   dark  color.border.bold      on elevation.surface                        5.38:1 / 3.0  meaningful border (WCAG 1.4.11)
 *   OK   dark  color.border.input     on elevation.surface                        3.90:1 / 3.0  input outline (WCAG 1.4.11)
 *   OK   dark  color.border.focused   on elevation.surface                        7.28:1 / 3.0  focus ring (WCAG 1.4.11)
 *   OK   dark  color.chart.brand      on elevation.surface                        7.28:1 / 3.0  chart series (graphical object)
 *   OK   dark  brand.logo.agens       on elevation.surface                        6.30:1 / 4.5  logo word Agens
 *   OK   dark  brand.logo.town        on elevation.surface                       17.80:1 / 4.5  logo word Town
 *   OK   dark  color.text             on elevation.surface.raised                17.40:1 / 4.5  text on a card
 *   OK   dark  color.text             on elevation.surface.overlay               15.03:1 / 4.5  text in a modal
 *   OK   dark  color.text             on elevation.surface.sunken                19.74:1 / 4.5  text in a sunken well
 *   OK   dark  color.text             on color.background.neutral                15.03:1 / 4.5  text on a neutral fill
 *   OK   dark  color.text.subtle      on color.background.neutral                10.26:1 / 4.5  secondary text on a neutral fill
 *   OK   dark  color.text.subtlest    on color.background.neutral                 5.90:1 / 4.5  tertiary text on a neutral fill
 *   OK   dark  color.text             on color.background.neutral.hovered        11.80:1 / 4.5  text on neutral fill, hover
 *   OK   dark  color.text             on color.background.neutral.pressed         9.02:1 / 4.5  text on neutral fill, pressed
 *   OK   dark  color.text             on color.background.neutral.subtle         17.40:1 / 4.5  text on a zebra row
 *   OK   dark  color.text.inverse     on color.background.neutral.bold            6.80:1 / 4.5  label on a solid neutral fill
 *   OK   dark  color.text.inverse     on color.background.brand.bold              6.71:1 / 4.5  primary button label
 *   OK   dark  color.text.inverse     on color.background.brand.bold.hovered      8.97:1 / 4.5  primary button label, hover
 *   OK   dark  color.text.inverse     on color.background.brand.bold.pressed     11.84:1 / 4.5  primary button label, pressed
 *   OK   dark  color.text.brand       on color.background.brand.subtlest          6.73:1 / 4.5  brand text on a brand tint
 *   OK   dark  color.text             on color.background.brand.subtlest         17.40:1 / 4.5  body text on a brand tint
 *   OK   dark  color.text.selected    on color.background.selected                6.73:1 / 4.5  selected row label
 *   OK   dark  color.text             on color.background.input                  19.74:1 / 4.5  typed value in a field
 *   OK   dark  color.text.subtlest    on color.background.input                   7.74:1 / 4.5  placeholder text
 *   OK   dark  color.text.disabled    on color.background.disabled                3.08:1 / 3.0  disabled field text (WCAG-exempt)
 *   OK   dark  color.text.danger      on color.background.danger                  6.30:1 / 4.5  error banner text
 *   OK   dark  color.text.success     on color.background.success                 7.20:1 / 4.5  success banner text
 *   OK   dark  color.text.warning     on color.background.warning                 6.67:1 / 4.5  warning banner text
 *   OK   dark  color.text.information on color.background.information             6.73:1 / 4.5  information banner text
 *   OK   dark  color.text.inverse     on color.background.danger.bold             6.23:1 / 4.5  destructive button label
 *   OK   dark  color.text.inverse     on color.background.success.bold            7.29:1 / 4.5  solid success badge label
 *   OK   dark  color.text.inverse     on color.background.information.bold        6.71:1 / 4.5  solid information badge label
 *   OK   dark  color.text.inverse     on color.background.inverse.subtle         13.98:1 / 4.5  tooltip text
 *   OK   dark  color.text.inverse     on color.background.warning.bold            6.64:1 / 4.5  label on a solid warning fill - yellow always takes dark ink
 *   OK   dark  brand.logo.agens       on brand.gradient.night                     6.70:1 / 4.5  logo on the night hero gradient (darkest stop)
 *   OK   dark  brand.logo.town        on brand.gradient.night                    18.91:1 / 4.5  logo on the night hero gradient (darkest stop)
 *
 * Two pairings are deliberately below 4.5:1 and are allowed to be:
 *   - color.text.disabled: WCAG 1.4.3 exempts disabled controls. Held at >= 3:1 anyway.
 *   - color.border (decorative): dividers and card edges carry no information.
 *     Any border that does carry information uses color.border.bold.
 */

/* ---------------------------------------------------------------------------
   LAYER 1 - GLOBAL PRIMITIVES
   Raw values. Do not use these in a component; they do not change with theme.
   --------------------------------------------------------------------------- */
:root {
  --at-color-palette-blue-0: #000102;
  --at-color-palette-blue-0: oklch(0.060 0.010 262);
  --at-color-palette-blue-1: #010309;
  --at-color-palette-blue-1: oklch(0.100 0.020 262);
  --at-color-palette-blue-2: #040b1a;
  --at-color-palette-blue-2: oklch(0.150 0.035 262);
  --at-color-palette-blue-3: #09152c;
  --at-color-palette-blue-3: oklch(0.200 0.050 262);
  --at-color-palette-blue-4: #102245;
  --at-color-palette-blue-4: oklch(0.260 0.070 262);
  --at-color-palette-blue-5: #193365;
  --at-color-palette-blue-5: oklch(0.330 0.095 262);
  --at-color-palette-blue-6: #1f438a;
  --at-color-palette-blue-6: oklch(0.400 0.125 262);
  --at-color-palette-blue-7: #2454b3;
  --at-color-palette-blue-7: oklch(0.470 0.160 262);
  --at-color-palette-blue-8: #2a66db;
  --at-color-palette-blue-8: oklch(0.540 0.190 262);
  --at-color-palette-blue-9: #3d7efc;
  --at-color-palette-blue-9: oklch(0.620 0.200 262);
  --at-color-palette-blue-10: #679cff;
  --at-color-palette-blue-10: oklch(0.700 0.157 262);
  --at-color-palette-blue-11: #90b7ff;
  --at-color-palette-blue-11: oklch(0.780 0.112 262);
  --at-color-palette-blue-12: #b9d2ff;
  --at-color-palette-blue-12: oklch(0.860 0.069 262);
  --at-color-palette-blue-13: #d7e5ff;
  --at-color-palette-blue-13: oklch(0.920 0.038 262);
  --at-color-palette-blue-14: #ebf2fe;
  --at-color-palette-blue-14: oklch(0.960 0.018 262);
  --at-color-palette-blue-15: #f8fafe;
  --at-color-palette-blue-15: oklch(0.985 0.006 262);
  --at-color-palette-neutral-0: #000102;
  --at-color-palette-neutral-0: oklch(0.060 0.010 262);
  --at-color-palette-neutral-1: #020306;
  --at-color-palette-neutral-1: oklch(0.100 0.012 262);
  --at-color-palette-neutral-2: #080b10;
  --at-color-palette-neutral-2: oklch(0.150 0.012 262);
  --at-color-palette-neutral-3: #13161c;
  --at-color-palette-neutral-3: oklch(0.200 0.012 262);
  --at-color-palette-neutral-4: #21242a;
  --at-color-palette-neutral-4: oklch(0.260 0.012 262);
  --at-color-palette-neutral-5: #32363c;
  --at-color-palette-neutral-5: oklch(0.330 0.012 262);
  --at-color-palette-neutral-6: #44484e;
  --at-color-palette-neutral-6: oklch(0.400 0.012 262);
  --at-color-palette-neutral-7: #575b62;
  --at-color-palette-neutral-7: oklch(0.470 0.012 262);
  --at-color-palette-neutral-8: #6b6f76;
  --at-color-palette-neutral-8: oklch(0.540 0.012 262);
  --at-color-palette-neutral-9: #82868e;
  --at-color-palette-neutral-9: oklch(0.620 0.012 262);
  --at-color-palette-neutral-10: #9a9fa6;
  --at-color-palette-neutral-10: oklch(0.700 0.012 262);
  --at-color-palette-neutral-11: #b3b8bf;
  --at-color-palette-neutral-11: oklch(0.780 0.012 262);
  --at-color-palette-neutral-12: #cdd1d9;
  --at-color-palette-neutral-12: oklch(0.860 0.012 262);
  --at-color-palette-neutral-13: #e0e5ed;
  --at-color-palette-neutral-13: oklch(0.920 0.012 262);
  --at-color-palette-neutral-14: #edf2fa;
  --at-color-palette-neutral-14: oklch(0.960 0.012 262);
  --at-color-palette-neutral-15: #f8fafe;
  --at-color-palette-neutral-15: oklch(0.985 0.006 262);
  --at-color-palette-success-0: #000100;
  --at-color-palette-success-0: oklch(0.060 0.010 150);
  --at-color-palette-success-1: #010502;
  --at-color-palette-success-1: oklch(0.100 0.020 150);
  --at-color-palette-success-2: #020f04;
  --at-color-palette-success-2: oklch(0.150 0.035 150);
  --at-color-palette-success-3: #021c09;
  --at-color-palette-success-3: oklch(0.200 0.050 150);
  --at-color-palette-success-4: #012d10;
  --at-color-palette-success-4: oklch(0.260 0.070 150);
  --at-color-palette-success-5: #004219;
  --at-color-palette-success-5: oklch(0.330 0.092 150);
  --at-color-palette-success-6: #005724;
  --at-color-palette-success-6: oklch(0.400 0.111 150);
  --at-color-palette-success-7: #006e30;
  --at-color-palette-success-7: oklch(0.470 0.130 150);
  --at-color-palette-success-8: #00853b;
  --at-color-palette-success-8: oklch(0.540 0.149 150);
  --at-color-palette-success-9: #00a149;
  --at-color-palette-success-9: oklch(0.620 0.171 150);
  --at-color-palette-success-10: #28bc5e;
  --at-color-palette-success-10: oklch(0.700 0.180 150);
  --at-color-palette-success-11: #76cf8a;
  --at-color-palette-success-11: oklch(0.780 0.130 150);
  --at-color-palette-success-12: #ace0b6;
  --at-color-palette-success-12: oklch(0.860 0.080 150);
  --at-color-palette-success-13: #d3edd7;
  --at-color-palette-success-13: oklch(0.920 0.040 150);
  --at-color-palette-success-14: #eaf5ec;
  --at-color-palette-success-14: oklch(0.960 0.018 150);
  --at-color-palette-success-15: #f7fbf8;
  --at-color-palette-success-15: oklch(0.985 0.006 150);
  --at-color-palette-warning-0: #010100;
  --at-color-palette-warning-0: oklch(0.060 0.010 75);
  --at-color-palette-warning-1: #060300;
  --at-color-palette-warning-1: oklch(0.100 0.020 75);
  --at-color-palette-warning-2: #140900;
  --at-color-palette-warning-2: oklch(0.150 0.035 75);
  --at-color-palette-warning-3: #221200;
  --at-color-palette-warning-3: oklch(0.200 0.046 75);
  --at-color-palette-warning-4: #341f00;
  --at-color-palette-warning-4: oklch(0.260 0.057 75);
  --at-color-palette-warning-5: #4a2f00;
  --at-color-palette-warning-5: oklch(0.330 0.071 75);
  --at-color-palette-warning-6: #624000;
  --at-color-palette-warning-6: oklch(0.400 0.085 75);
  --at-color-palette-warning-7: #7b5100;
  --at-color-palette-warning-7: oklch(0.470 0.100 75);
  --at-color-palette-warning-8: #956300;
  --at-color-palette-warning-8: oklch(0.540 0.114 75);
  --at-color-palette-warning-9: #b37900;
  --at-color-palette-warning-9: oklch(0.620 0.131 75);
  --at-color-palette-warning-10: #d38f00;
  --at-color-palette-warning-10: oklch(0.700 0.148 75);
  --at-color-palette-warning-11: #e8aa4e;
  --at-color-palette-warning-11: oklch(0.780 0.130 75);
  --at-color-palette-warning-12: #f0ca96;
  --at-color-palette-warning-12: oklch(0.860 0.080 75);
  --at-color-palette-warning-13: #f5e1c8;
  --at-color-palette-warning-13: oklch(0.920 0.040 75);
  --at-color-palette-warning-14: #f9f0e5;
  --at-color-palette-warning-14: oklch(0.960 0.018 75);
  --at-color-palette-warning-15: #fdfaf6;
  --at-color-palette-warning-15: oklch(0.985 0.006 75);
  --at-color-palette-danger-0: #020000;
  --at-color-palette-danger-0: oklch(0.060 0.010 25);
  --at-color-palette-danger-1: #080202;
  --at-color-palette-danger-1: oklch(0.100 0.020 25);
  --at-color-palette-danger-2: #170505;
  --at-color-palette-danger-2: oklch(0.150 0.035 25);
  --at-color-palette-danger-3: #290b0a;
  --at-color-palette-danger-3: oklch(0.200 0.050 25);
  --at-color-palette-danger-4: #401312;
  --at-color-palette-danger-4: oklch(0.260 0.070 25);
  --at-color-palette-danger-5: #5d1c1b;
  --at-color-palette-danger-5: oklch(0.330 0.095 25);
  --at-color-palette-danger-6: #7d2322;
  --at-color-palette-danger-6: oklch(0.400 0.125 25);
  --at-color-palette-danger-7: #a12628;
  --at-color-palette-danger-7: oklch(0.470 0.160 25);
  --at-color-palette-danger-8: #c52b30;
  --at-color-palette-danger-8: oklch(0.540 0.190 25);
  --at-color-palette-danger-9: #e64343;
  --at-color-palette-danger-9: oklch(0.620 0.200 25);
  --at-color-palette-danger-10: #fa6863;
  --at-color-palette-danger-10: oklch(0.700 0.180 25);
  --at-color-palette-danger-11: #ff958d;
  --at-color-palette-danger-11: oklch(0.780 0.128 25);
  --at-color-palette-danger-12: #ffbeb8;
  --at-color-palette-danger-12: oklch(0.860 0.076 25);
  --at-color-palette-danger-13: #fedbd7;
  --at-color-palette-danger-13: oklch(0.920 0.040 25);
  --at-color-palette-danger-14: #feedec;
  --at-color-palette-danger-14: oklch(0.960 0.018 25);
  --at-color-palette-danger-15: #fef9f8;
  --at-color-palette-danger-15: oklch(0.985 0.006 25);
  --at-color-palette-white: #ffffff;
  --at-color-palette-white: oklch(1.000 0.000 262);
  --at-color-palette-black: #000000;
  --at-color-palette-black: oklch(0.000 0.000 262);
  --at-font-family-display: Poppins, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-font-family-body: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-font-family-code: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --at-font-weight-regular: 400;
  --at-font-weight-medium: 500;
  --at-font-weight-semibold: 600;
  --at-font-weight-bold: 700;
  --at-font-weight-extrabold: 800;
  --at-font-size-050: 11px;
  --at-font-size-075: 12px;
  --at-font-size-100: 14px;
  --at-font-size-200: 16px;
  --at-font-size-300: 20px;
  --at-font-size-400: 24px;
  --at-font-size-500: 29px;
  --at-font-size-600: 35px;
  --at-font-size-700: 42px;
  --at-font-size-800: 50px;
  --at-font-lineHeight-heading: 1.2;
  --at-font-lineHeight-body: 1.5;
  --at-font-lineHeight-relaxed: 1.7;
  --at-font-letterSpacing-display: -0.03em;
  --at-font-letterSpacing-heading: -0.02em;
  --at-font-letterSpacing-body: 0em;
  --at-space-025: 2px;
  --at-space-050: 4px;
  --at-space-100: 8px;
  --at-space-150: 12px;
  --at-space-200: 16px;
  --at-space-250: 20px;
  --at-space-300: 24px;
  --at-space-400: 32px;
  --at-space-500: 40px;
  --at-space-600: 48px;
  --at-space-800: 64px;
  --at-space-1000: 80px;
  --at-radius-050: 2px;
  --at-radius-100: 4px;
  --at-radius-200: 8px;
  --at-radius-circle: 9999px;
  --at-border-width-050: 1px;
  --at-border-width-100: 2px;
  --at-elevation-shadow-raised: 0px 1px 1px 0px #00010233, 0px 0px 1px 0px #00010247;
  --at-elevation-shadow-raised: 0px 1px 1px 0px oklch(0.060 0.010 262 / 0.2), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.28);
  --at-elevation-shadow-overlay: 0px 4px 8px -2px #00010238, 0px 0px 1px 0px #00010247;
  --at-elevation-shadow-overlay: 0px 4px 8px -2px oklch(0.060 0.010 262 / 0.22), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.28);
  --at-motion-duration-instant: 50ms;
  --at-motion-duration-fast: 100ms;
  --at-motion-duration-base: 200ms;
  --at-motion-duration-slow: 300ms;
  --at-motion-duration-deliberate: 500ms;
  --at-motion-duration-shimmer: 5500ms;
  --at-motion-easing-standard: cubic-bezier(0.4,0,0.2,1);
  --at-motion-easing-emphasized: cubic-bezier(0.16,1,0.3,1);
  --at-opacity-disabled: 0.4;
  --at-opacity-loading: 0.6;
  --at-zIndex-card: 100;
  --at-zIndex-navigation: 200;
  --at-zIndex-dialog: 300;
  --at-zIndex-blanket: 500;
  --at-zIndex-modal: 510;
  --at-zIndex-flag: 600;
  --at-zIndex-spotlight: 700;
  --at-zIndex-tooltip: 800;
}

/* ---------------------------------------------------------------------------
   LAYER 2 - SEMANTIC, LIGHT (default)
   --------------------------------------------------------------------------- */
[data-theme="light"],
:root {
  --at-color-text: #13161c;
  --at-color-text: oklch(0.200 0.012 262);
  --at-color-text-subtle: #44484e;
  --at-color-text-subtle: oklch(0.400 0.012 262);
  --at-color-text-subtlest: #575b62;
  --at-color-text-subtlest: oklch(0.470 0.012 262);
  --at-color-text-disabled: #82868e;
  --at-color-text-disabled: oklch(0.620 0.012 262);
  --at-color-text-inverse: #ffffff;
  --at-color-text-inverse: oklch(1.000 0.000 262);
  --at-color-text-brand: #2454b3;
  --at-color-text-brand: oklch(0.470 0.160 262);
  --at-color-text-selected: #2454b3;
  --at-color-text-selected: oklch(0.470 0.160 262);
  --at-color-text-danger: #a12628;
  --at-color-text-danger: oklch(0.470 0.160 25);
  --at-color-text-warning: #7b5100;
  --at-color-text-warning: oklch(0.470 0.100 75);
  --at-color-text-success: #006e30;
  --at-color-text-success: oklch(0.470 0.130 150);
  --at-color-text-information: #2454b3;
  --at-color-text-information: oklch(0.470 0.160 262);
  --at-color-link: #2454b3;
  --at-color-link: oklch(0.470 0.160 262);
  --at-color-link-pressed: #1f438a;
  --at-color-link-pressed: oklch(0.400 0.125 262);
  --at-color-icon: #13161c;
  --at-color-icon: oklch(0.200 0.012 262);
  --at-color-icon-subtle: #44484e;
  --at-color-icon-subtle: oklch(0.400 0.012 262);
  --at-color-icon-subtlest: #575b62;
  --at-color-icon-subtlest: oklch(0.470 0.012 262);
  --at-color-icon-disabled: #82868e;
  --at-color-icon-disabled: oklch(0.620 0.012 262);
  --at-color-icon-inverse: #ffffff;
  --at-color-icon-inverse: oklch(1.000 0.000 262);
  --at-color-icon-brand: #2454b3;
  --at-color-icon-brand: oklch(0.470 0.160 262);
  --at-color-icon-selected: #2454b3;
  --at-color-icon-selected: oklch(0.470 0.160 262);
  --at-color-icon-danger: #a12628;
  --at-color-icon-danger: oklch(0.470 0.160 25);
  --at-color-icon-warning: #7b5100;
  --at-color-icon-warning: oklch(0.470 0.100 75);
  --at-color-icon-success: #006e30;
  --at-color-icon-success: oklch(0.470 0.130 150);
  --at-color-icon-information: #2454b3;
  --at-color-icon-information: oklch(0.470 0.160 262);
  --at-color-border: #e0e5ed;
  --at-color-border: oklch(0.920 0.012 262);
  --at-color-border-bold: #575b62;
  --at-color-border-bold: oklch(0.470 0.012 262);
  --at-color-border-brand: #2454b3;
  --at-color-border-brand: oklch(0.470 0.160 262);
  --at-color-border-focused: #2a66db;
  --at-color-border-focused: oklch(0.540 0.190 262);
  --at-color-border-input: #6b6f76;
  --at-color-border-input: oklch(0.540 0.012 262);
  --at-color-border-disabled: #cdd1d9;
  --at-color-border-disabled: oklch(0.860 0.012 262);
  --at-color-background-neutral: #e0e5ed;
  --at-color-background-neutral: oklch(0.920 0.012 262);
  --at-color-background-neutral-hovered: #cdd1d9;
  --at-color-background-neutral-hovered: oklch(0.860 0.012 262);
  --at-color-background-neutral-pressed: #b3b8bf;
  --at-color-background-neutral-pressed: oklch(0.780 0.012 262);
  --at-color-background-neutral-subtle: #edf2fa;
  --at-color-background-neutral-subtle: oklch(0.960 0.012 262);
  --at-color-background-neutral-bold: #44484e;
  --at-color-background-neutral-bold: oklch(0.400 0.012 262);
  --at-color-background-brand-bold: #2454b3;
  --at-color-background-brand-bold: oklch(0.470 0.160 262);
  --at-color-background-brand-bold-hovered: #1f438a;
  --at-color-background-brand-bold-hovered: oklch(0.400 0.125 262);
  --at-color-background-brand-bold-pressed: #193365;
  --at-color-background-brand-bold-pressed: oklch(0.330 0.095 262);
  --at-color-background-brand-subtlest: #ebf2fe;
  --at-color-background-brand-subtlest: oklch(0.960 0.018 262);
  --at-color-background-selected: #ebf2fe;
  --at-color-background-selected: oklch(0.960 0.018 262);
  --at-color-background-input: #ffffff;
  --at-color-background-input: oklch(1.000 0.000 262);
  --at-color-background-disabled: #edf2fa;
  --at-color-background-disabled: oklch(0.960 0.012 262);
  --at-color-background-danger: #feedec;
  --at-color-background-danger: oklch(0.960 0.018 25);
  --at-color-background-danger-bold: #c52b30;
  --at-color-background-danger-bold: oklch(0.540 0.190 25);
  --at-color-background-warning: #f9f0e5;
  --at-color-background-warning: oklch(0.960 0.018 75);
  --at-color-background-warning-bold: #d38f00;
  --at-color-background-warning-bold: oklch(0.700 0.148 75);
  --at-color-background-success: #eaf5ec;
  --at-color-background-success: oklch(0.960 0.018 150);
  --at-color-background-success-bold: #00853b;
  --at-color-background-success-bold: oklch(0.540 0.149 150);
  --at-color-background-information: #ebf2fe;
  --at-color-background-information: oklch(0.960 0.018 262);
  --at-color-background-information-bold: #2454b3;
  --at-color-background-information-bold: oklch(0.470 0.160 262);
  --at-color-background-inverse-subtle: #13161c;
  --at-color-background-inverse-subtle: oklch(0.200 0.012 262 / 0.9);
  --at-color-skeleton: #e0e5ed;
  --at-color-skeleton: oklch(0.920 0.012 262);
  --at-color-chart-brand: #2a66db;
  --at-color-chart-brand: oklch(0.540 0.190 262);
  --at-elevation-surface: #ffffff;
  --at-elevation-surface: oklch(1.000 0.000 262);
  --at-elevation-surface-raised: #ffffff;
  --at-elevation-surface-raised: oklch(1.000 0.000 262);
  --at-elevation-surface-overlay: #ffffff;
  --at-elevation-surface-overlay: oklch(1.000 0.000 262);
  --at-elevation-surface-sunken: #edf2fa;
  --at-elevation-surface-sunken: oklch(0.960 0.012 262);
  --at-elevation-shadow-raised: 0px 1px 1px 0px #00010233, 0px 0px 1px 0px #00010247;
  --at-elevation-shadow-raised: 0px 1px 1px 0px oklch(0.060 0.010 262 / 0.2), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.28);
  --at-elevation-shadow-overlay: 0px 4px 8px -2px #00010238, 0px 0px 1px 0px #00010247;
  --at-elevation-shadow-overlay: 0px 4px 8px -2px oklch(0.060 0.010 262 / 0.22), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.28);
  --at-brand-logo-agens: #1f53b8;
  --at-brand-logo-agens: oklch(0.470 0.170 262);
  --at-brand-logo-town: #09152c;
  --at-brand-logo-town: oklch(0.200 0.050 262);
  --at-brand-logo-glow: #679cff;
  --at-brand-logo-glow: oklch(0.700 0.157 262);
  --at-brand-logo-shimmer: #cddfff;
  --at-brand-logo-shimmer: oklch(0.900 0.048 262);
  --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, #030713 0%, #000102 100%);
  --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, oklch(0.130 0.030 262) 0%, oklch(0.060 0.010 262) 100%);
  --at-brand-gradient-dawn: linear-gradient(160deg, #2454b3 0%, #ffffff 100%);
  --at-brand-gradient-dawn: linear-gradient(160deg, oklch(0.470 0.160 262) 0%, oklch(1.000 0.000 262) 100%);
}

/* ---------------------------------------------------------------------------
   LAYER 3 - SEMANTIC, DARK (explicit opt-in)
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --at-color-text: #f8fafe;
  --at-color-text: oklch(0.985 0.006 262);
  --at-color-text-subtle: #cdd1d9;
  --at-color-text-subtle: oklch(0.860 0.012 262);
  --at-color-text-subtlest: #9a9fa6;
  --at-color-text-subtlest: oklch(0.700 0.012 262);
  --at-color-text-disabled: #6b6f76;
  --at-color-text-disabled: oklch(0.540 0.012 262);
  --at-color-text-inverse: #13161c;
  --at-color-text-inverse: oklch(0.200 0.012 262);
  --at-color-text-brand: #679cff;
  --at-color-text-brand: oklch(0.700 0.157 262);
  --at-color-text-selected: #679cff;
  --at-color-text-selected: oklch(0.700 0.157 262);
  --at-color-text-danger: #fa6863;
  --at-color-text-danger: oklch(0.700 0.180 25);
  --at-color-text-warning: #d38f00;
  --at-color-text-warning: oklch(0.700 0.148 75);
  --at-color-text-success: #28bc5e;
  --at-color-text-success: oklch(0.700 0.180 150);
  --at-color-text-information: #679cff;
  --at-color-text-information: oklch(0.700 0.157 262);
  --at-color-link: #679cff;
  --at-color-link: oklch(0.700 0.157 262);
  --at-color-link-pressed: #90b7ff;
  --at-color-link-pressed: oklch(0.780 0.112 262);
  --at-color-icon: #f8fafe;
  --at-color-icon: oklch(0.985 0.006 262);
  --at-color-icon-subtle: #cdd1d9;
  --at-color-icon-subtle: oklch(0.860 0.012 262);
  --at-color-icon-subtlest: #9a9fa6;
  --at-color-icon-subtlest: oklch(0.700 0.012 262);
  --at-color-icon-disabled: #6b6f76;
  --at-color-icon-disabled: oklch(0.540 0.012 262);
  --at-color-icon-inverse: #13161c;
  --at-color-icon-inverse: oklch(0.200 0.012 262);
  --at-color-icon-brand: #679cff;
  --at-color-icon-brand: oklch(0.700 0.157 262);
  --at-color-icon-selected: #679cff;
  --at-color-icon-selected: oklch(0.700 0.157 262);
  --at-color-icon-danger: #fa6863;
  --at-color-icon-danger: oklch(0.700 0.180 25);
  --at-color-icon-warning: #d38f00;
  --at-color-icon-warning: oklch(0.700 0.148 75);
  --at-color-icon-success: #28bc5e;
  --at-color-icon-success: oklch(0.700 0.180 150);
  --at-color-icon-information: #679cff;
  --at-color-icon-information: oklch(0.700 0.157 262);
  --at-color-border: #193365;
  --at-color-border: oklch(0.330 0.095 262);
  --at-color-border-bold: #82868e;
  --at-color-border-bold: oklch(0.620 0.012 262);
  --at-color-border-brand: #679cff;
  --at-color-border-brand: oklch(0.700 0.157 262);
  --at-color-border-focused: #679cff;
  --at-color-border-focused: oklch(0.700 0.157 262);
  --at-color-border-input: #6b6f76;
  --at-color-border-input: oklch(0.540 0.012 262);
  --at-color-border-disabled: #102245;
  --at-color-border-disabled: oklch(0.260 0.070 262);
  --at-color-background-neutral: #102245;
  --at-color-background-neutral: oklch(0.260 0.070 262);
  --at-color-background-neutral-hovered: #193365;
  --at-color-background-neutral-hovered: oklch(0.330 0.095 262);
  --at-color-background-neutral-pressed: #1f438a;
  --at-color-background-neutral-pressed: oklch(0.400 0.125 262);
  --at-color-background-neutral-subtle: #09152c;
  --at-color-background-neutral-subtle: oklch(0.200 0.050 262);
  --at-color-background-neutral-bold: #9a9fa6;
  --at-color-background-neutral-bold: oklch(0.700 0.012 262);
  --at-color-background-brand-bold: #679cff;
  --at-color-background-brand-bold: oklch(0.700 0.157 262);
  --at-color-background-brand-bold-hovered: #90b7ff;
  --at-color-background-brand-bold-hovered: oklch(0.780 0.112 262);
  --at-color-background-brand-bold-pressed: #b9d2ff;
  --at-color-background-brand-bold-pressed: oklch(0.860 0.069 262);
  --at-color-background-brand-subtlest: #09152c;
  --at-color-background-brand-subtlest: oklch(0.200 0.050 262);
  --at-color-background-selected: #09152c;
  --at-color-background-selected: oklch(0.200 0.050 262);
  --at-color-background-input: #010309;
  --at-color-background-input: oklch(0.100 0.020 262);
  --at-color-background-disabled: #21242a;
  --at-color-background-disabled: oklch(0.260 0.012 262);
  --at-color-background-danger: #290b0a;
  --at-color-background-danger: oklch(0.200 0.050 25);
  --at-color-background-danger-bold: #fa6863;
  --at-color-background-danger-bold: oklch(0.700 0.180 25);
  --at-color-background-warning: #221200;
  --at-color-background-warning: oklch(0.200 0.046 75);
  --at-color-background-warning-bold: #d38f00;
  --at-color-background-warning-bold: oklch(0.700 0.148 75);
  --at-color-background-success: #021c09;
  --at-color-background-success: oklch(0.200 0.050 150);
  --at-color-background-success-bold: #28bc5e;
  --at-color-background-success-bold: oklch(0.700 0.180 150);
  --at-color-background-information: #09152c;
  --at-color-background-information: oklch(0.200 0.050 262);
  --at-color-background-information-bold: #679cff;
  --at-color-background-information-bold: oklch(0.700 0.157 262);
  --at-color-background-inverse-subtle: #f8fafe;
  --at-color-background-inverse-subtle: oklch(0.985 0.006 262 / 0.9);
  --at-color-skeleton: #102245;
  --at-color-skeleton: oklch(0.260 0.070 262);
  --at-color-chart-brand: #679cff;
  --at-color-chart-brand: oklch(0.700 0.157 262);
  --at-elevation-surface: #040b1a;
  --at-elevation-surface: oklch(0.150 0.035 262);
  --at-elevation-surface-raised: #09152c;
  --at-elevation-surface-raised: oklch(0.200 0.050 262);
  --at-elevation-surface-overlay: #102245;
  --at-elevation-surface-overlay: oklch(0.260 0.070 262);
  --at-elevation-surface-sunken: #010309;
  --at-elevation-surface-sunken: oklch(0.100 0.020 262);
  --at-elevation-shadow-raised: 0px 1px 1px 0px #00010280, 0px 0px 1px 0px #00010299;
  --at-elevation-shadow-raised: 0px 1px 1px 0px oklch(0.060 0.010 262 / 0.5), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.6);
  --at-elevation-shadow-overlay: 0px 4px 8px -2px #0001028c, 0px 0px 1px 0px #00010299;
  --at-elevation-shadow-overlay: 0px 4px 8px -2px oklch(0.060 0.010 262 / 0.55), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.6);
  --at-brand-logo-agens: #6d92d6;
  --at-brand-logo-agens: oklch(0.660 0.110 262);
  --at-brand-logo-town: #eef4fe;
  --at-brand-logo-town: oklch(0.965 0.015 262);
  --at-brand-logo-glow: #679cff;
  --at-brand-logo-glow: oklch(0.700 0.157 262);
  --at-brand-logo-shimmer: #cddfff;
  --at-brand-logo-shimmer: oklch(0.900 0.048 262);
  --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, #030713 0%, #000102 100%);
  --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, oklch(0.130 0.030 262) 0%, oklch(0.060 0.010 262) 100%);
  --at-brand-gradient-dawn: linear-gradient(160deg, #2454b3 0%, #ffffff 100%);
  --at-brand-gradient-dawn: linear-gradient(160deg, oklch(0.470 0.160 262) 0%, oklch(1.000 0.000 262) 100%);
}

/* ---------------------------------------------------------------------------
   LAYER 4 - SEMANTIC, DARK by system preference
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --at-color-text: #f8fafe;
    --at-color-text: oklch(0.985 0.006 262);
    --at-color-text-subtle: #cdd1d9;
    --at-color-text-subtle: oklch(0.860 0.012 262);
    --at-color-text-subtlest: #9a9fa6;
    --at-color-text-subtlest: oklch(0.700 0.012 262);
    --at-color-text-disabled: #6b6f76;
    --at-color-text-disabled: oklch(0.540 0.012 262);
    --at-color-text-inverse: #13161c;
    --at-color-text-inverse: oklch(0.200 0.012 262);
    --at-color-text-brand: #679cff;
    --at-color-text-brand: oklch(0.700 0.157 262);
    --at-color-text-selected: #679cff;
    --at-color-text-selected: oklch(0.700 0.157 262);
    --at-color-text-danger: #fa6863;
    --at-color-text-danger: oklch(0.700 0.180 25);
    --at-color-text-warning: #d38f00;
    --at-color-text-warning: oklch(0.700 0.148 75);
    --at-color-text-success: #28bc5e;
    --at-color-text-success: oklch(0.700 0.180 150);
    --at-color-text-information: #679cff;
    --at-color-text-information: oklch(0.700 0.157 262);
    --at-color-link: #679cff;
    --at-color-link: oklch(0.700 0.157 262);
    --at-color-link-pressed: #90b7ff;
    --at-color-link-pressed: oklch(0.780 0.112 262);
    --at-color-icon: #f8fafe;
    --at-color-icon: oklch(0.985 0.006 262);
    --at-color-icon-subtle: #cdd1d9;
    --at-color-icon-subtle: oklch(0.860 0.012 262);
    --at-color-icon-subtlest: #9a9fa6;
    --at-color-icon-subtlest: oklch(0.700 0.012 262);
    --at-color-icon-disabled: #6b6f76;
    --at-color-icon-disabled: oklch(0.540 0.012 262);
    --at-color-icon-inverse: #13161c;
    --at-color-icon-inverse: oklch(0.200 0.012 262);
    --at-color-icon-brand: #679cff;
    --at-color-icon-brand: oklch(0.700 0.157 262);
    --at-color-icon-selected: #679cff;
    --at-color-icon-selected: oklch(0.700 0.157 262);
    --at-color-icon-danger: #fa6863;
    --at-color-icon-danger: oklch(0.700 0.180 25);
    --at-color-icon-warning: #d38f00;
    --at-color-icon-warning: oklch(0.700 0.148 75);
    --at-color-icon-success: #28bc5e;
    --at-color-icon-success: oklch(0.700 0.180 150);
    --at-color-icon-information: #679cff;
    --at-color-icon-information: oklch(0.700 0.157 262);
    --at-color-border: #193365;
    --at-color-border: oklch(0.330 0.095 262);
    --at-color-border-bold: #82868e;
    --at-color-border-bold: oklch(0.620 0.012 262);
    --at-color-border-brand: #679cff;
    --at-color-border-brand: oklch(0.700 0.157 262);
    --at-color-border-focused: #679cff;
    --at-color-border-focused: oklch(0.700 0.157 262);
    --at-color-border-input: #6b6f76;
    --at-color-border-input: oklch(0.540 0.012 262);
    --at-color-border-disabled: #102245;
    --at-color-border-disabled: oklch(0.260 0.070 262);
    --at-color-background-neutral: #102245;
    --at-color-background-neutral: oklch(0.260 0.070 262);
    --at-color-background-neutral-hovered: #193365;
    --at-color-background-neutral-hovered: oklch(0.330 0.095 262);
    --at-color-background-neutral-pressed: #1f438a;
    --at-color-background-neutral-pressed: oklch(0.400 0.125 262);
    --at-color-background-neutral-subtle: #09152c;
    --at-color-background-neutral-subtle: oklch(0.200 0.050 262);
    --at-color-background-neutral-bold: #9a9fa6;
    --at-color-background-neutral-bold: oklch(0.700 0.012 262);
    --at-color-background-brand-bold: #679cff;
    --at-color-background-brand-bold: oklch(0.700 0.157 262);
    --at-color-background-brand-bold-hovered: #90b7ff;
    --at-color-background-brand-bold-hovered: oklch(0.780 0.112 262);
    --at-color-background-brand-bold-pressed: #b9d2ff;
    --at-color-background-brand-bold-pressed: oklch(0.860 0.069 262);
    --at-color-background-brand-subtlest: #09152c;
    --at-color-background-brand-subtlest: oklch(0.200 0.050 262);
    --at-color-background-selected: #09152c;
    --at-color-background-selected: oklch(0.200 0.050 262);
    --at-color-background-input: #010309;
    --at-color-background-input: oklch(0.100 0.020 262);
    --at-color-background-disabled: #21242a;
    --at-color-background-disabled: oklch(0.260 0.012 262);
    --at-color-background-danger: #290b0a;
    --at-color-background-danger: oklch(0.200 0.050 25);
    --at-color-background-danger-bold: #fa6863;
    --at-color-background-danger-bold: oklch(0.700 0.180 25);
    --at-color-background-warning: #221200;
    --at-color-background-warning: oklch(0.200 0.046 75);
    --at-color-background-warning-bold: #d38f00;
    --at-color-background-warning-bold: oklch(0.700 0.148 75);
    --at-color-background-success: #021c09;
    --at-color-background-success: oklch(0.200 0.050 150);
    --at-color-background-success-bold: #28bc5e;
    --at-color-background-success-bold: oklch(0.700 0.180 150);
    --at-color-background-information: #09152c;
    --at-color-background-information: oklch(0.200 0.050 262);
    --at-color-background-information-bold: #679cff;
    --at-color-background-information-bold: oklch(0.700 0.157 262);
    --at-color-background-inverse-subtle: #f8fafe;
    --at-color-background-inverse-subtle: oklch(0.985 0.006 262 / 0.9);
    --at-color-skeleton: #102245;
    --at-color-skeleton: oklch(0.260 0.070 262);
    --at-color-chart-brand: #679cff;
    --at-color-chart-brand: oklch(0.700 0.157 262);
    --at-elevation-surface: #040b1a;
    --at-elevation-surface: oklch(0.150 0.035 262);
    --at-elevation-surface-raised: #09152c;
    --at-elevation-surface-raised: oklch(0.200 0.050 262);
    --at-elevation-surface-overlay: #102245;
    --at-elevation-surface-overlay: oklch(0.260 0.070 262);
    --at-elevation-surface-sunken: #010309;
    --at-elevation-surface-sunken: oklch(0.100 0.020 262);
    --at-elevation-shadow-raised: 0px 1px 1px 0px #00010280, 0px 0px 1px 0px #00010299;
    --at-elevation-shadow-raised: 0px 1px 1px 0px oklch(0.060 0.010 262 / 0.5), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.6);
    --at-elevation-shadow-overlay: 0px 4px 8px -2px #0001028c, 0px 0px 1px 0px #00010299;
    --at-elevation-shadow-overlay: 0px 4px 8px -2px oklch(0.060 0.010 262 / 0.55), 0px 0px 1px 0px oklch(0.060 0.010 262 / 0.6);
    --at-brand-logo-agens: #6d92d6;
    --at-brand-logo-agens: oklch(0.660 0.110 262);
    --at-brand-logo-town: #eef4fe;
    --at-brand-logo-town: oklch(0.965 0.015 262);
    --at-brand-logo-glow: #679cff;
    --at-brand-logo-glow: oklch(0.700 0.157 262);
    --at-brand-logo-shimmer: #cddfff;
    --at-brand-logo-shimmer: oklch(0.900 0.048 262);
    --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, #030713 0%, #000102 100%);
    --at-brand-gradient-night: radial-gradient(120% 120% at 50% 0%, oklch(0.130 0.030 262) 0%, oklch(0.060 0.010 262) 100%);
    --at-brand-gradient-dawn: linear-gradient(160deg, #2454b3 0%, #ffffff 100%);
    --at-brand-gradient-dawn: linear-gradient(160deg, oklch(0.470 0.160 262) 0%, oklch(1.000 0.000 262) 100%);
  }
}

/* ---------------------------------------------------------------------------
   LAYER 5 - DISPLAY-P3
   sRGB cannot hold the chroma the night blue wants at high lightness. On a P3
   panel the glow, the sweep highlight and the primary fill get their full
   chroma back; hue and lightness are untouched, so contrast is unchanged.
   --------------------------------------------------------------------------- */
@media (color-gamut: p3) {
  [data-theme="light"],
  :root {
    --at-brand-logo-glow: color(display-p3 0.4338 0.6008 1.0000);
    --at-brand-logo-shimmer: color(display-p3 0.8145 0.8718 0.9926);
    --at-color-background-brand-bold: color(display-p3 0.1900 0.3250 0.6771); /* no sRGB clipping - same colour, P3 coordinates */
  }

  [data-theme="dark"] {
    --at-brand-logo-glow: color(display-p3 0.4338 0.6008 1.0000);
    --at-brand-logo-shimmer: color(display-p3 0.8145 0.8718 0.9926);
    --at-color-background-brand-bold: color(display-p3 0.4338 0.6008 1.0000);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --at-brand-logo-glow: color(display-p3 0.4338 0.6008 1.0000);
      --at-brand-logo-shimmer: color(display-p3 0.8145 0.8718 0.9926);
      --at-color-background-brand-bold: color(display-p3 0.4338 0.6008 1.0000);
    }
  }
}

/* ============================================================================
   LOGO
   Poppins, two weights, tight tracking. Colours come from the brand tokens, so
   the lockup re-themes with the page and never needs a second stylesheet.
   ============================================================================ */

.at-logo {
  font-family: var(--at-font-family-display);
  font-size: var(--at-font-size-800);
  line-height: var(--at-font-lineHeight-heading);
  letter-spacing: var(--at-font-letterSpacing-display);
  white-space: nowrap;
  display: inline-block;
  position: relative;
}

.at-logo__agens {
  font-weight: var(--at-font-weight-bold);
  color: var(--at-brand-logo-agens);
}

.at-logo__town {
  font-weight: var(--at-font-weight-extrabold);
  color: var(--at-brand-logo-town);
}

/* DS-7: matte light sweep plus a slowly breathing halo. The highlight travels
   across the wordmark once every 5.5 s at 105deg, so it reads as a sheet of light
   passing over a physical surface. "Town" carries the halo, which is why it is the
   brighter word at night. */

.at-logo--shimmer .at-logo__agens,
.at-logo--shimmer .at-logo__town {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: at-logo-sweep var(--at-motion-duration-shimmer) var(--at-motion-easing-standard) infinite;
}

.at-logo--shimmer .at-logo__agens {
  background-image: linear-gradient(
    105deg,
    var(--at-brand-logo-agens) 40%,
    var(--at-brand-logo-shimmer) 50%,
    var(--at-brand-logo-agens) 60%
  );
}

.at-logo--shimmer .at-logo__town {
  background-image: linear-gradient(
    105deg,
    var(--at-brand-logo-town) 40%,
    var(--at-brand-logo-shimmer) 50%,
    var(--at-brand-logo-town) 60%
  );
  /* em, not px: the halo scales with the lockup */
  filter: drop-shadow(0 0 0.12em var(--at-brand-logo-glow));
}

@keyframes at-logo-sweep {
  0%   { background-position: 130% 0; }
  60%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

/* The breathing halo behind "Town" (DS-7). Dark themes only - on a light surface a
   glow behind near-black type reads as a printing fault. Put this element inside
   .at-logo, before the words, with aria-hidden="true". */

.at-logo__halo {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 28% 30% at 62% 50%,
    color-mix(in oklch, var(--at-brand-logo-glow) 28%, transparent), transparent 70%);
  animation: at-logo-breathe 9s ease-in-out infinite;
}

[data-theme="dark"] .at-logo__halo { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-logo__halo { display: block; }
}

@keyframes at-logo-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .at-logo--shimmer .at-logo__agens,
  .at-logo--shimmer .at-logo__town,
  .at-logo__halo {
    animation: none;
  }
  .at-logo--shimmer .at-logo__agens,
  .at-logo--shimmer .at-logo__town {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }
  .at-logo--shimmer .at-logo__agens { color: var(--at-brand-logo-agens); }
  .at-logo--shimmer .at-logo__town  { color: var(--at-brand-logo-town); }
  .at-logo__halo { opacity: 0.7; }
}

/* ============================================================================
   FOCUS
   One ring for the whole system: 2 px, brand blue, offset 2 px so it never
   touches the control it marks. Never remove it without replacing it.
   ============================================================================ */

.at-focus-ring:focus-visible,
.at-focus-ring:focus {
  outline: var(--at-border-width-100) solid var(--at-color-border-focused);
  outline-offset: 2px;
  border-radius: inherit;
}

.at-focus-ring:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   PRINT
   Paper is a light surface with no shadows and no animation.
   ============================================================================ */

@media print {
  :root {
    --at-elevation-shadow-raised: none;
    --at-elevation-shadow-overlay: none;
  }
  .at-logo--shimmer .at-logo__agens,
  .at-logo--shimmer .at-logo__town {
    animation: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    filter: none;
  }
  .at-logo--shimmer .at-logo__agens { color: var(--at-brand-logo-agens); }
  .at-logo--shimmer .at-logo__town  { color: var(--at-brand-logo-town); }
  .at-logo__halo { display: none; }
}