/* ============================================================
   Design Tokens — sourced from Figma base-2.0
   File key: PPFUN9y075S2QcADTwdgUp
   Auto-synced via: npm run tokens:sync
   Naming convention mirrors Figma variable paths (/ → -)
   ============================================================ */

:root {

  /* ============================================================
     COLOR — PRIMITIVES
     Neutral: lightness scale (00 = black, 100 = white)
     Palettes: 10 = darkest, 90 = lightest, A50 = brand accent
     ============================================================ */

  /* ---- Neutral ---- */
  --color-neutral-00:     #000000;
  --color-neutral-04:     #0d0f13;
  --color-neutral-06:     #121418;
  --color-neutral-10:     #1a1a1a;
  --color-neutral-12:     #1f2126;
  --color-neutral-17:     #292b30;
  --color-neutral-20:     #333333;
  --color-neutral-22:     #34363b;
  --color-neutral-24:     #383a3e;
  --color-neutral-26:     #424242;
  --color-neutral-30:     #4d4d4d;
  --color-neutral-40:     #666666;
  --color-neutral-50:     #808080;
  --color-neutral-60:     #999999;
  --color-neutral-70:     #b2b2b2;
  --color-neutral-80:     #cccccc;
  --color-neutral-80-var: #c4c7d0;
  --color-neutral-86:     #dbdbdb;
  --color-neutral-88:     #e0e0e0;
  --color-neutral-90:     #e5e5e5;
  --color-neutral-92:     #ebebeb;
  --color-neutral-94:     #f0f0f0;
  --color-neutral-95:     #eff0f4;
  --color-neutral-96:     #f5f5f5;
  --color-neutral-98:     #fafafa;
  --color-neutral-84:     #d6d6d6;
  --color-neutral-100:    #ffffff;
  --color-neutral-outline: #a1a1a1;

  /* ---- Navy ---- */
  --color-navy-10:  #01102e;
  --color-navy-20:  #02205c;
  --color-navy-30:  #06328a;
  --color-navy-40:  #0f47b8;
  --color-navy-50:  #1b5de0;
  --color-navy-60:  #427aeb;
  --color-navy-70:  #719df5;
  --color-navy-80:  #a0befa;
  --color-navy-26:  #032973;
  --color-navy-86:  #b6cdfa;
  --color-navy-90:  #cddcfa;
  --color-navy-92:  #d2dffa;
  --color-navy-94:  #dee8fa;
  --color-navy-96:  #e9effc;
  --color-navy-98:  #f5f8ff;
  --color-navy-a50: #0c59f2;

  /* ---- Blue ---- */
  --color-blue-10:  #01132e;
  --color-blue-20:  #022c5c;
  --color-blue-30:  #06488a;
  --color-blue-40:  #0f69b8;
  --color-blue-50:  #1b89e0;
  --color-blue-60:  #429feb;
  --color-blue-70:  #71bbf6;
  --color-blue-80:  #9fd1f9;
  --color-blue-65:  #2e93e5;
  --color-blue-90:  #cee7fb;
  --color-blue-95:  #e6f3fd;
  --color-blue-a50: #0064ff;

  /* ---- Cornflower ---- */
  --color-cornflower-10:  #01012e;
  --color-cornflower-20:  #02025c;
  --color-cornflower-30:  #06068a;
  --color-cornflower-40:  #0f0fb8;
  --color-cornflower-50:  #1b1be0;
  --color-cornflower-60:  #4242eb;
  --color-cornflower-70:  #7171f5;
  --color-cornflower-80:  #a0a0fa;
  --color-cornflower-26:  #030373;
  --color-cornflower-86:  #b6b6fa;
  --color-cornflower-90:  #cdcdfa;
  --color-cornflower-92:  #d2d2fa;
  --color-cornflower-94:  #dedefa;
  --color-cornflower-96:  #e9e9fc;
  --color-cornflower-98:  #f5f5ff;
  --color-cornflower-a50: #0c0cf2;

  /* ---- Purple ---- */
  --color-purple-10:  #1c012e;
  --color-purple-20:  #3b025c;
  --color-purple-30:  #59068a;
  --color-purple-40:  #740fb8;
  --color-purple-50:  #8e1be0;
  --color-purple-60:  #a542eb;
  --color-purple-70:  #c071f5;
  --color-purple-80:  #d8a0fa;
  --color-purple-25:  #470373;
  --color-purple-26:  #4c047a;
  --color-purple-35:  #650aa1;
  --color-purple-90:  #ebcdfa;
  --color-purple-95:  #f9e7fc;
  --color-purple-96:  #fcebff;
  --color-purple-98:  #fff6fd;
  --color-purple-99:  #fffaff;
  --color-purple-a40: #9e0cf2;

  /* ---- Fuscia ---- */
  --color-fuscia-10:  #2e012e;
  --color-fuscia-20:  #5c025c;
  --color-fuscia-30:  #8a068a;
  --color-fuscia-40:  #b80fb8;
  --color-fuscia-50:  #e01be0;
  --color-fuscia-60:  #eb42eb;
  --color-fuscia-70:  #f571f5;
  --color-fuscia-80:  #faa0fa;
  --color-fuscia-90:  #facdfa;
  --color-fuscia-a50: #ff00ff;

  /* ---- Pink ---- */
  --color-pink-10:  #2e0110;
  --color-pink-20:  #5c021f;
  --color-pink-30:  #8a0631;
  --color-pink-40:  #b80f46;
  --color-pink-50:  #e01b5d;
  --color-pink-60:  #eb427a;
  --color-pink-70:  #f5719d;
  --color-pink-80:  #faa0be;
  --color-pink-90:  #facddc;
  --color-pink-95:  #fce6ed;
  --color-pink-a50: #f20c59;

  /* ---- Red ---- */
  --color-red-10:  #2e0301;
  --color-red-20:  #5c0602;
  --color-red-30:  #8a0b06;
  --color-red-40:  #b8180f;
  --color-red-50:  #e0251b;
  --color-red-60:  #eb4a42;
  --color-red-70:  #f57771;
  --color-red-80:  #faa4a0;
  --color-red-25:  #73030d;
  --color-red-35:  #a10a10;
  --color-red-90:  #f9cecc;
  --color-red-95:  #fce6e5;
  --color-red-98:  #fff6f6;
  --color-red-99:  #fffafa;
  --color-red-a50: #f2170b;

  /* ---- Orange ---- */
  --color-orange-10:  #2e1901;
  --color-orange-20:  #5c3202;
  --color-orange-30:  #8a4a06;
  --color-orange-40:  #b8670f;
  --color-orange-50:  #e98313;
  --color-orange-60:  #ea9438;
  --color-orange-70:  #f5b571;
  --color-orange-80:  #facfa0;
  --color-orange-90:  #fae4cd;
  --color-orange-95:  #fcf1e6;
  --color-orange-a50: #ff8800;

  /* ---- Yellow ---- */
  --color-yellow-10:  #2e2e01;
  --color-yellow-20:  #5c5c02;
  --color-yellow-30:  #8a8a06;
  --color-yellow-40:  #b8b80f;
  --color-yellow-50:  #e0e01b;
  --color-yellow-60:  #ebeb42;
  --color-yellow-70:  #f5f571;
  --color-yellow-80:  #fafaa0;
  --color-yellow-90:  #fafacd;
  --color-yellow-95:  #fcfce6;
  --color-yellow-a50: #ffff00;

  /* ---- Green ---- */
  --color-green-10:  #022e01;
  --color-green-15:  #044701;
  --color-green-20:  #055c02;
  --color-green-30:  #0a8a06;
  --color-green-40:  #14b80f;
  --color-green-50:  #22e01b;
  --color-green-60:  #47eb42;
  --color-green-70:  #75f571;
  --color-green-80:  #a3faa0;
  --color-green-90:  #cefacd;
  --color-green-95:  #e6fce6;
  --color-green-a50: #08ff00;

  /* ---- Teal ---- */
  --color-teal-10:  #012e23;
  --color-teal-15:  #014534;
  --color-teal-20:  #025c45;
  --color-teal-30:  #068a69;
  --color-teal-40:  #0fb88d;
  --color-teal-50:  #1be0af;
  --color-teal-60:  #42ebc0;
  --color-teal-70:  #71f5d4;
  --color-teal-80:  #a0fae3;
  --color-teal-90:  #cdfaef;
  --color-teal-95:  #e6fcf7;
  --color-teal-a50: #00ffbf;

  /* ---- Cyan ---- */
  --color-cyan-10:  #01262e;
  --color-cyan-20:  #024d5c;
  --color-cyan-30:  #06738a;
  --color-cyan-40:  #0f9bb8;
  --color-cyan-50:  #1bbfe0;
  --color-cyan-60:  #42ceeb;
  --color-cyan-70:  #71e0f6;
  --color-cyan-80:  #9feaf9;
  --color-cyan-90:  #cef3fb;
  --color-cyan-95:  #e6f9fd;
  --color-cyan-a50: #00d4ff;


  /* ============================================================
     COLOR — SEMANTIC
     Maps to Figma color/surface/* and color/primary/* variables
     ============================================================ */

  /* ---- Surface (color/surface/*) ---- */
  --color-surface-default:               #f5f5f5;
  --color-surface-on-surface:            #171717;
  --color-surface-container-lowest:      #ffffff;
  --color-surface-container-low:         #fafafa;
  --color-surface-container:             #f5f5f5;
  --color-surface-container-high:        #e5e5e5;
  --color-surface-container-highest:     #d4d4d4;
  --color-surface-container-highest-alt: var(--color-neutral-outline-container);   /* deprecated: no Figma source since 2026-10-29 */

  /* ---- Primary / Secondary (color/primary/*, color/secondary/*) ---- */
  --color-primary:                       #162456;   /* blue-950 */
  --color-primary-container-low:         #dbeafe;   /* blue-100 */
  --color-primary-container:             #bedbff;   /* blue-200 */
  --color-primary-on-container:          #162456;   /* blue-950 */
  --color-primary-on-primary-container:  #162456;   /* blue-950 */
  --color-primary-container-on:          #162456;   /* blue-950 */
  --color-primary-on-primary:            #eff6ff;   /* blue-50 */
  --color-on-primary:                    #eff6ff;   /* blue-50 */
  --color-primary-dark:                  #011f52;   /* navy-15 */
  --color-primary-inverse:               #8ec5ff;   /* blue-300 */
  --color-primary-container-fixed:       #bedbff;   /* blue-200 */
  --color-primary-container-fixed-dim:   #8ec5ff;   /* blue-300 */
  --color-primary-on-fixed:              #162456;   /* blue-950 */
  --color-primary-on-fixed-variant:      #1c398e;   /* blue-900 */
  --color-primary-container-high-fixed:  #162456;   /* blue-950 */
  --color-primary-on-container-high-fixed: #eff6ff; /* blue-50 */
  --color-secondary:                     #372aac;   /* indigo-800 */
  --color-secondary-on-secondary:        #eef2ff;   /* indigo-50 */
  --color-secondary-inverse:             #a3b3ff;   /* indigo-300 */
  --color-secondary-container-lowest:    #e0e7ff;   /* indigo-100 */
  --color-secondary-on-container-lowest: #1e1a4d;   /* indigo-950 */
  --color-secondary-container-low:       #c6d2ff;   /* indigo-200 */
  --color-secondary-on-container-low:    #1e1a4d;   /* indigo-950 */
  --color-secondary-container:           #4f39f6;   /* indigo-600 */
  --color-secondary-on-container:        #eef2ff;   /* indigo-50 */
  --color-secondary-container-high:      #432dd7;   /* indigo-700 */
  --color-secondary-on-container-high:   #eef2ff;   /* indigo-50 */
  --color-secondary-container-fixed:     #4f39f6;   /* indigo-600 */
  --color-secondary-on-container-fixed:  #eef2ff;   /* indigo-50 */
  --color-secondary-container-fixed-dim: #432dd7;   /* indigo-700 */
  --color-secondary-container-inverse:   #eef2ff;   /* indigo-50 */
  --color-secondary-on-container-inverse: #4f39f6;   /* indigo-600 */
  --color-secondary-container-high-fixed: #1e1a4d;   /* indigo-950 */
  --color-secondary-on-container-high-fixed: #eef2ff;   /* indigo-50 */

  /* ---- Warning (color/warning/*) ---- */
  --color-warning-warning:     #ffb86a;   /* orange-300 */
  --color-warning-on-warning:  #7e2a0c;   /* orange-900 */

  /* ---- Tiered ---- */
  --color-tier-1: #b5a6ff;   /* Tiered/Tier 1 (Colors library) */

  /* ---- Outage pin body colors ---- */
  --color-outage-pin-01: #032973;   /* navy-20   · active outage */
  --color-outage-pin-02: #022e01;   /* green-10  · crew on-site */
  --color-outage-pin-03: #0f0fb8;   /* blue      · scheduled */
  --color-outage-pin-04: #f5b571;   /* orange-70 · flagged */
  --color-outage-pin-05: #b8180f;   /* red-40    · resolved */
  --color-outage-pin-icon: #eff0f4; /* near-white · icon fill */
  --color-map-pin-avail-unsel: #e6fce6; /* mint-10    · available unselected */
  --color-map-pin-avail-sel:   #032973; /* navy-20    · available selected */
  --color-map-pin-busy:        #f5b571; /* orange-70  · busy */

  /* ---- Surface secondary text ---- */
  --color-surface-on-surface-var: #525252;   /* neutral-600 */

  /* ---- Interaction aliases ---- */
  --interaction-primary-tonal-hovered: #b6cdfa;   /* = tonal-state-layer-hovered */

  /* ---- Interaction / checkbox ---- */
  /* Figma base-2.0 · node 3583:593 */
  --interaction-checkbox-outline:                   var(--color-neutral-outline);

  /* ---- Shared state layer tokens (Switch, RadioButton, etc.) ---- */
  /* on-surface: used for unselected/inactive hover/focus state layers */
  --states-on-surface-08: rgba(26, 26, 26, 0.08);    /* Figma: states/on-surface-08 */
  --states-on-surface-12: rgba(26, 26, 26, 0.12);    /* Figma: states/on-surface-12 */
  /* primary: dedicated states/primary color — distinct from color/primary/primary */
  --states-primary-08:    rgba(13, 48, 153, 0.08);   /* Figma: states/primary-08 (#0d3099) */
  --states-primary-12:    rgba(13, 48, 153, 0.12);   /* Figma: states/primary-12 (#0d3099) */
  --states-primary-16:    rgba(13, 48, 153, 0.16);   /* states/primary (#0d3099) @ 16% — pressed */
  --states-on-primary-12: rgba(245, 248, 255, 0.12); /* on-primary (#f5f8ff) @ 12% — hover on filled primary */
  /* error: dedicated states/error color — distinct from color/error/error */
  --states-error-08:      rgba(179, 38, 30, 0.08);   /* Figma: states/error-08 (#b3261e) */
  --states-error-12:      rgba(179, 38, 30, 0.12);   /* Figma: states/error-12 (#b3261e) */
  /* surface-var: used for switch disabled track */
  --states-surface-var-12: rgba(229, 229, 229, 0.12); /* Figma: states/surface-var-12 */


  /* ============================================================
     SYSTEM TOKENS — Buttons collection
     Figma: System Tokens / Buttons — modes: Small | Medium | Large | X-Large
     These per-size tokens are referenced by the button component.
     Medium values confirmed via Figma variable_defs (node 3357:859).
     ============================================================ */

  /* ---- Small ---- */
  --button-sm-padding-top-bottom: 8px;    /* → h = 36px  (2×8 + 20) */
  --button-sm-padding-text:       16px;
  --button-sm-padding-icon:       12px;
  --button-sm-padding-between:    8px;
  --button-sm-font-size:          var(--font-label-size);           /* 14px */
  --button-sm-line-height:        var(--font-label-line-height);    /* 20px */

  /* ---- Medium (confirmed from Figma) ---- */
  --button-md-padding-top-bottom: 10px;   /* → h = 40px  (2×10 + 20) */
  --button-md-padding-text:       24px;
  --button-md-padding-icon:       16px;
  --button-md-padding-between:    8px;
  --button-md-font-size:          var(--font-label-size);           /* 14px */
  --button-md-line-height:        var(--font-label-line-height);    /* 20px */

  /* ---- Large ---- */
  --button-lg-padding-top-bottom: 14px;   /* → h = 48px  (2×14 + 20) */
  --button-lg-padding-text:       28px;
  --button-lg-padding-icon:       18px;
  --button-lg-padding-between:    8px;
  --button-lg-font-size:          var(--font-label-xl-size);        /* 16px */
  --button-lg-line-height:        var(--font-label-xl-line-height); /* 20px */

  /* ---- X-Large ---- */
  --button-xl-padding-top-bottom: 18px;   /* → h = 56px  (2×18 + 20) */
  --button-xl-padding-text:       32px;
  --button-xl-padding-icon:       20px;
  --button-xl-padding-between:    8px;
  --button-xl-font-size:          var(--font-label-xl-size);        /* 16px */
  --button-xl-line-height:        var(--font-label-xl-line-height); /* 20px */

  /* ---- Shape / icon / font (Figma Buttons collection, per size mode) ---- */
  --button-sm-shape:       var(--corner-full);
  --button-sm-icon-size:   16px;
  --button-sm-font-family: var(--font-label-family);
  --button-sm-font-weight: var(--font-label-weight);
  --button-md-shape:       var(--corner-full);
  --button-md-icon-size:   18px;
  --button-md-font-family: var(--font-label-family);
  --button-md-font-weight: var(--font-label-weight);
  --button-lg-shape:       var(--corner-full);
  --button-lg-icon-size:   20px;
  --button-lg-font-family: var(--font-label-family);
  --button-lg-font-weight: var(--font-label-weight);
  --button-xl-shape:       var(--corner-full);
  --button-xl-icon-size:   20px;
  --button-xl-font-family: var(--font-label-family);
  --button-xl-font-weight: var(--font-label-weight);


  /* ============================================================
     SYSTEM TOKENS — Interaction
     Figma: System Tokens / interaction / primary / filled
     Light-mode defaults; overridden in [data-theme="dark"] below.
     ============================================================ */

  --interaction-primary-filled-container:           #162456;   /* primary-primary */
  --interaction-primary-filled-label:               #eff6ff;   /* primary-on-primary */
  --interaction-primary-filled-icon:                #eff6ff;
  --interaction-primary-filled-state-layer-hovered: #1c398e;   /* blue-900 */
  --interaction-primary-filled-state-layer-pressed: #193cb8;
  --interaction-primary-filled-state-layer-focused: #193cb8;
  --interaction-primary-filled-state-layer-dragged: #1447e6;

  /* ---- Interaction / error / filled ---- */
  --interaction-error-filled-container:           #c10007;   /* error-error */
  --interaction-error-filled-label:               #ffffff;   /* error-on-error */
  --interaction-error-filled-state-layer-hovered: #9f0712;   /* error-state-filled-hover */
  --interaction-error-filled-state-layer-pressed: #82181a;
  --interaction-error-filled-state-layer-focused: #82181a;
  --interaction-error-filled-state-layer-dragged: #460809;

  /* ---- Interaction / primary / elevated ---- */
  --interaction-primary-elevated-container:           #fafafa;   /* neutral-98 */
  --interaction-primary-elevated-label:               #162456;   /* primary-primary */
  --interaction-primary-elevated-state-layer-hovered: #dbeafe;   /* primary-state-surface-hover */
  --interaction-primary-elevated-state-layer-pressed: #bedbff;
  --interaction-primary-elevated-state-layer-focused: #bedbff;
  --interaction-primary-elevated-state-layer-dragged: #8ec5ff;

  /* ---- Interaction / primary / filled-inverse ---- */
  --interaction-primary-filled-inverse-container:           #fafafa;   /* neutral-98 */
  --interaction-primary-filled-inverse-label:               #162456;   /* primary-primary */
  --interaction-primary-filled-inverse-state-layer-hovered: #dbeafe;   /* primary-state-surface-hover */
  --interaction-primary-filled-inverse-state-layer-pressed: #bedbff;
  --interaction-primary-filled-inverse-state-layer-focused: #bedbff;
  --interaction-primary-filled-inverse-state-layer-dragged: #8ec5ff;

  /* ---- Interaction / primary / tonal ---- */
  --interaction-primary-tonal-container:           #bedbff;   /* primary-container-primary-container */
  --interaction-primary-tonal-label:               #162456;   /* primary-container-on-primary-container */
  --interaction-primary-tonal-state-layer-hovered: #8ec5ff;   /* primary-state-tonal-hover */
  --interaction-primary-tonal-state-layer-pressed: #51a2ff;
  --interaction-primary-tonal-state-layer-focused: #51a2ff;
  --interaction-primary-tonal-state-layer-dragged: #51a2ff;

  /* ---- Interaction / primary / outlined ---- */
  --interaction-primary-outlined-outline:           #a1a1a1;   /* interaction-neutral-outline */
  --interaction-primary-outlined-label:               #162456;   /* primary-primary */
  --interaction-primary-outlined-state-layer-hovered: #dbeafe;   /* primary-state-surface-hover */
  --interaction-primary-outlined-state-layer-pressed: #bedbff;
  --interaction-primary-outlined-state-layer-focused: #bedbff;
  --interaction-primary-outlined-state-layer-dragged: #8ec5ff;

  /* ---- Interaction / primary / text ---- */
  --interaction-primary-text-label:               #162456;   /* primary-primary */
  --interaction-primary-text-state-layer-hovered: #dbeafe;   /* primary-state-surface-hover */
  --interaction-primary-text-state-layer-pressed: #bedbff;
  --interaction-primary-text-state-layer-focused: #bedbff;
  --interaction-primary-text-state-layer-dragged: #8ec5ff;

  /* ---- Interaction / primary / text-inverse ---- */
  --interaction-primary-text-inverse-label:               #eff6ff;   /* primary-on-primary */
  --interaction-primary-text-inverse-state-layer-hovered: #1c398e;   /* primary-state-text-inverse-hover */
  --interaction-primary-text-inverse-state-layer-pressed: #193cb8;
  --interaction-primary-text-inverse-state-layer-focused: #193cb8;
  --interaction-primary-text-inverse-state-layer-dragged: #1447e6;

  /* ---- Interaction / error / text ---- */
  --interaction-error-text-label:               #460809;   /* error-on-error-container */
  --interaction-error-text-state-layer-hovered: #ffe2e2;   /* red-100 */
  --interaction-error-text-state-layer-pressed: #ffc9c9;
  --interaction-error-text-state-layer-focused: #ffc9c9;
  --interaction-error-text-state-layer-dragged: #ffa2a2;


  /* ============================================================
     SYSTEM TOKENS — Shape
     Figma: System Tokens / shape — references radius/* primitives
     ============================================================ */

  --corner-none: var(--radius-none);
  --corner-xs:   var(--radius-xs);
  --corner-sm:   var(--radius-sm);
  --corner-md:   var(--radius-md);
  --corner-lg:   var(--radius-lg);
  --corner-xl:   var(--radius-xl);
  --corner-full: var(--radius-full);


  /* ============================================================
     SPACE
     Figma: Reference Variables / space
     ============================================================ */

  --space-none: 0px;    /* space/none */
  --space-2xs:  2px;    /* space/2xs */
  --space-xs:   4px;    /* space/xs */
  --space-sm:   6px;    /* space/sm */
  --space-md:   8px;    /* space/md */
  --space-lg:   10px;   /* space/lg */
  --space-xl:   12px;   /* space/xl */
  --space-2xl:  16px;   /* space/2xl */
  --space-3xl:  24px;   /* space/3xl */


  /* ============================================================
     SIZE
     Figma: Reference Variables / size
     ============================================================ */

  --size-none: 0px;    /* size/none */
  --size-2xs:  2px;    /* size/2xs */
  --size-xs:   4px;    /* size/xs */
  --size-sm:   6px;    /* size/sm */
  --size-md:   8px;    /* size/md */
  --size-lg:   12px;   /* size/lg */
  --size-xl:   16px;   /* size/xl */
  --size-2xl:  18px;   /* size/2xl */
  --size-3xl:  24px;   /* size/3xl */
  --size-4xl:  32px;   /* size/4xl */
  --size-5xl:  64px;   /* size/5xl */


  /* ============================================================
     TYPOGRAPHY
     Figma variables: font/display/*, font/headline/*, etc.
     Font family: Open Sans (all categories)
     ============================================================ */

  --font-family: 'Open Sans';

  /* ---- Display (font/display/*) ---- */
  --font-display-family:      'Open Sans';
  --font-display-weight:      700;
  --font-display-size:        57px;
  --font-display-line-height: 64px;

  --font-display-md-size:        45px;
  --font-display-md-line-height: 52px;

  --font-display-sm-size:        36px;
  --font-display-sm-line-height: 44px;

  /* ---- Headline (font/headline/*) ---- */
  --font-headline-family:      'Open Sans';
  --font-headline-weight:      700;
  --font-headline-size:        32px;
  --font-headline-line-height: 40px;

  --font-headline-md-size:        28px;
  --font-headline-md-line-height: 36px;

  --font-headline-sm-size:        24px;
  --font-headline-sm-line-height: 32px;

  /* ---- Title (font/title/*) ---- */
  --font-title-family:      'Open Sans';
  --font-title-weight:      600;
  --font-title-size:        22px;
  --font-title-line-height: 28px;

  --font-title-md-size:        16px;
  --font-title-md-line-height: 24px;

  --font-title-sm-size:        14px;
  --font-title-sm-line-height: 20px;

  --font-title-xs-size:        12px;
  --font-title-xs-line-height: 16px;

  /* ---- Body (font/body/*) ---- */
  --font-body-family:           'Open Sans';
  --font-body-weight:           400;
  --font-body-prominent-weight: 600;
  --font-body-size:             16px;
  --font-body-line-height:      24px;

  --font-body-sm-size:        12px;
  --font-body-sm-line-height: 16px;

  --font-body-md-size:        14px;   /* font/body/medium/font-size */
  --font-body-md-line-height: 20px;   /* font/body/medium/line-height */

  /* ---- Label (font/label/*) ---- */
  --font-label-family:           'Open Sans';
  --font-label-weight:           500;
  --font-label-prominent-weight: 700;

  --font-label-xxl-size:        32px;
  --font-label-xxl-line-height: 40px;

  --font-label-xl-size:        16px;
  --font-label-xl-line-height: 20px;

  --font-label-lg-size:        14px;
  --font-label-lg-line-height: 20px;
  --font-label-lg-weight:      600;

  --font-label-size:        14px;
  --font-label-line-height: 20px;

  --font-label-md-size:        12px;
  --font-label-md-line-height: 16px;

  --font-label-sm-size:        11px;
  --font-label-sm-line-height: 16px;

  --font-label-micro-size:        10px;
  --font-label-micro-line-height: 16px;

  /* ---- Nav bar (font/nav-bar/*) ---- */
  --font-nav-bar-family:      'Open Sans';
  --font-nav-bar-weight:      500;
  --font-nav-bar-size:        10px;
  --font-nav-bar-line-height: 12px;


  /* ============================================================
     SHAPE / BORDER RADIUS
     Figma variables: radius/md, shape/corner-lg
     ============================================================ */

  --radius-none: 0px;    /* radius/none */
  --radius-xs:   2px;    /* radius/xs */
  --radius-sm:   4px;    /* radius/sm */
  --radius-md:   8px;    /* radius/md */
  --radius-lg:   16px;   /* radius/lg */
  --radius-xl:   24px;   /* radius/xl */
  --radius-full: 999px;  /* radius/full */
  --radius-2xl:  32px;   /* radius/2xl */


  /* ============================================================
     ELEVATION
     Figma variables: elevation/level-*, elevation/dropshadow-*-color
     ============================================================ */

  --elevation-dropshadow-1-color: #0000004d;   /* elevation/dropshadow-1-color (key, 30% opacity) */
  --elevation-dropshadow-2-color: #00000026;   /* elevation/dropshadow-2-color (ambient, 15% opacity) */
  --elevation-dropshadow-3-color: #0000001a;   /* 10% opacity — Navigation bar */

  --elevation-1: 0 1px 3px 0 #00000026, 0 1px 2px 0 #0000004d;
  --elevation-2: 0 2px 6px 6px #00000026, 0 1px 2px 0 #0000004d;
  --elevation-3: 0 2px 3px 0 #00000026, 0 4px 8px 3px #0000004d;
  --elevation-4: 0 2px 3px 0 #00000026, 0 6px 10px 4px #0000004d;
  --elevation-5: 0 4px 4px 0 #00000026, 0 8px 12px 0 #0000004d;


  /* ============================================================
     GRADIENTS
     Figma variables: gradient/primary-start, gradient/primary-stop, etc.
     ============================================================ */

  --gradient-primary-start:   #193cb8;   /* blue-800 */
  --gradient-primary-stop:    #155dfc;   /* blue-600 */

  --gradient-secondary-start: #432dd7;   /* indigo-700 */
  --gradient-secondary-stop:  #4f39f6;   /* indigo-600 */

  --gradient-success-start:   #032e15;   /* green-950 */
  --gradient-success-stop:    #016630;   /* green-800 */

  --gradient-warning-start:   #ff8904;   /* orange-400 */
  --gradient-warning-stop:    #ffb86a;

  --gradient-error-start:     #9f0712;   /* red-800 */
  --gradient-error-stop:      #c10007;   /* red-700 */


  /* ============================================================
     GRID
     Figma variables: Layout collection — grid-styles/*, container/margin
     ============================================================ */

  --grid-minor:         8px;    /* grid-styles/grid-minor */
  --grid-major:         64px;   /* grid-styles/grid-major */
  --grid-columns-width: 88px;   /* grid-styles/columns-width */
  --container-margin:   24px;   /* container/margin — layout side padding */

  /* Content max-width — default cap for all web projects */
  --content-max-width:  1200px;


  /* ============================================================
     LAYOUT
     Figma variables: Layout collection — Desktop mode values (1280–1471px).
     Tablet / Mobile / Desktop-LG modes are the @media overrides after :root.
     navigation/* booleans and viewport are design-only.
     ============================================================ */

  --screen-width:                          1280px;                /* screen/width */
  --screen-gap:                            0px;                   /* screen/gap */
  --screen-h-padding:                      0px;                   /* screen/h-padding */
  --screen-v-padding:                      0px;                   /* screen/v-padding */
  --container-width:                       var(--screen-width);   /* container/width */
  --container-gap:                         16px;                  /* container/gap */
  --container-h-padding:                   var(--container-margin); /* container/h-padding */
  --container-v-padding:                   24px;                  /* container/v-padding */
  --container-main-width:                  816px;                 /* container/main/width */
  --container-main-gap:                    16px;                  /* container/main/gap */
  --container-main-h-padding:              0px;                   /* container/main/h-padding */
  --container-main-v-padding:              0px;                   /* container/main/v-padding */
  --container-main-section-bottom-padding: 16px;                  /* container/main/section/bottom-padding */
  --container-main-full-width:             1232px;                /* container/main-full/width */
  --container-main-full-gap:               32px;                  /* container/main-full/gap */
  --container-main-full-h-padding:         0px;                   /* container/main-full/h-padding */
  --container-main-full-v-padding:         0px;                   /* container/main-full/v-padding */
  --container-sidebar-width:               400px;                 /* container/sidebar/width */
  --container-sidebar-gap:                 16px;                  /* container/sidebar/gap */
  --container-sidebar-h-padding:           0px;                   /* container/sidebar/h-padding */
  --container-sidebar-v-padding:           0px;                   /* container/sidebar/v-padding */
  --grid-columns-count:                    12;                    /* grid-styles/columns-count */
  --grid-columns-margin:                   var(--container-margin); /* grid-styles/columns-margin */
  --grid-columns-gutter:                   16px;                  /* grid-styles/columns-gutter */


  /* ============================================================
     SPACING ALIASES
     Figma variables: Spacing collection — semantic aliases of space/*
     ============================================================ */

  --spacing-none:             var(--space-none);     /* spacing/none */
  --spacing-gap-tight:        var(--space-xs);       /* spacing/gap/tight */
  --spacing-gap-default:      var(--space-md);       /* spacing/gap/default */
  --spacing-gap-comfortable:  var(--space-2xl);      /* spacing/gap/comfortable */
  --spacing-gap-loose:        var(--space-3xl);      /* spacing/gap/loose */
  --spacing-padding-tight:    var(--space-xs);       /* spacing/padding/tight */
  --spacing-padding-compact:  var(--space-md);       /* spacing/padding/compact */
  --spacing-padding-snug:     var(--space-xl);       /* spacing/padding/snug */
  --spacing-padding-default:  var(--space-2xl);      /* spacing/padding/default */
  --spacing-padding-spacious: var(--space-3xl);      /* spacing/padding/spacious */


  /* ============================================================
     FORMS
     Figma variables: Forms collection
     ============================================================ */

  --form-content-gap:                      16px;                  /* form/content/gap */
  --form-content-h-padding:                0px;                   /* form/content/h-padding */
  --form-content-v-padding:                0px;                   /* form/content/v-padding */
  --form-gap:                              0px;                   /* form/gap */
  --form-h-padding:                        0px;                   /* form/h-padding */
  --form-v-padding:                        0px;                   /* form/v-padding */
  --form-fieldset-gap:                     16px;                  /* form/fieldset/gap */
  --form-fieldset-h-padding:               24px;                  /* form/fieldset/h-padding */
  --form-fieldset-v-padding:               24px;                  /* form/fieldset/v-padding */
  --form-fieldset-header-gap:              4px;                   /* form/fieldset/header/gap */
  --form-fieldset-header-h-padding:        0px;                   /* form/fieldset/header/h-padding */
  --form-fieldset-header-v-padding-top:    0px;                   /* form/fieldset/header/v-padding-top */
  --form-fieldset-header-v-padding-bottom: 8px;                   /* form/fieldset/header/v-padding-bottom */
  --form-fieldset-header-row-gap:          8px;                   /* form/fieldset/header/row/gap */
  --form-fieldset-header-row-h-padding:    0px;                   /* form/fieldset/header/row/h-padding */
  --form-fieldset-header-row-v-padding:    0px;                   /* form/fieldset/header/row/v-padding */
  --form-fieldset-message-group-gap:       8px;                   /* form/fieldset/message-group/gap */
  --form-fieldset-message-group-h-padding: 0px;                   /* form/fieldset/message-group/h-padding */
  --form-fieldset-message-group-v-padding: 0px;                   /* form/fieldset/message-group/v-padding */
  --form-fieldset-nested-gap:              16px;                  /* form/fieldset-nested/gap */
  --form-fieldset-nested-h-padding:        16px;                  /* form/fieldset-nested/h-padding */
  --form-fieldset-nested-v-padding-top:    8px;                   /* form/fieldset-nested/v-padding-top */
  --form-fieldset-nested-v-padding-bottom: 16px;                  /* form/fieldset-nested/v-padding-bottom */
  --form-input-group-gap:                  24px;                  /* form/input-group/gap */
  --form-input-group-h-padding:            0px;                   /* form/input-group/h-padding */
  --form-input-group-v-padding:            0px;                   /* form/input-group/v-padding */
  --form-input-group-row-gap:              8px;                   /* form/input-group/row/gap */
  --form-input-group-row-h-padding:        0px;                   /* form/input-group/row/h-padding */
  --form-input-group-row-v-padding:        0px;                   /* form/input-group/row/v-padding */
  --form-radio-group-gap:                  8px;                   /* form/radio-group/gap */
  --form-radio-group-h-padding:            0px;                   /* form/radio-group/h-padding */
  --form-radio-group-v-padding:            0px;                   /* form/radio-group/v-padding */
  --form-radio-group-radio-row-gap:        8px;                   /* form/radio-group/radio-row/gap */
  --form-radio-group-radio-row-h-padding:  0px;                   /* form/radio-group/radio-row/h-padding */
  --form-radio-group-radio-row-v-padding:  0px;                   /* form/radio-group/radio-row/v-padding */
  --form-cbx-group-gap:                    8px;                   /* form/cbx-group/gap */
  --form-cbx-group-h-padding:              0px;                   /* form/cbx-group/h-padding */
  --form-cbx-group-v-padding:              0px;                   /* form/cbx-group/v-padding */
  --form-cbx-group-cbx-row-gap:            8px;                   /* form/cbx-group/cbx-row/gap */
  --form-cbx-group-cbx-row-h-padding:      0px;                   /* form/cbx-group/cbx-row/h-padding */
  --form-cbx-group-cbx-row-v-padding:      0px;                   /* form/cbx-group/cbx-row/v-padding */
  --form-tile-group-gap:                   8px;                   /* form/tile-group/gap */
  --form-tile-group-h-padding:             0px;                   /* form/tile-group/h-padding */
  --form-tile-group-v-padding:             0px;                   /* form/tile-group/v-padding */


  /* ============================================================
     TILES
     Figma variables: Components / tiles/* — Density 0 mode.
     Density -1: shape → radius-lg, h/v-padding → space-2xl (not expressed in CSS yet).
     ============================================================ */

  --tile-md-shape:     var(--radius-xl);      /* tiles/md/shape */
  --tile-md-h-padding: var(--space-3xl);      /* tiles/md/h-padding */
  --tile-md-v-padding: var(--space-3xl);      /* tiles/md/v-padding */
  --tile-md-gap:       var(--space-md);       /* tiles/md/gap */
  --tile-md-icon-size: var(--size-3xl);       /* tiles/md/icon-size */
  --tile-lg-shape:     var(--radius-xl);      /* tiles/lg/shape */
  --tile-lg-h-padding: var(--space-3xl);      /* tiles/lg/h-padding */
  --tile-lg-v-padding: var(--space-3xl);      /* tiles/lg/v-padding */
  --tile-lg-gap:       var(--space-md);       /* tiles/lg/gap */
  --tile-lg-icon-size: var(--size-4xl);       /* tiles/lg/icon-size */


  /* ============================================================
     CHIPS
     Figma variables: Chips collection
     ============================================================ */

  --chip-md-shape:              var(--radius-md);      /* medium/shape */
  --chip-md-icon-size:          18px;                  /* medium/icon-size */
  --chip-md-padding-left-right: var(--space-xl);       /* medium/padding-left-right */
  --chip-md-padding-top-bottom: var(--space-sm);       /* medium/padding-top-bottom */
  --chip-md-padding-icon:       var(--space-md);       /* medium/padding-icon */
  --chip-md-padding-between:    var(--space-md);       /* medium/padding-between */
  --chip-sm-shape:              var(--radius-sm);      /* small/shape */
  --chip-sm-icon-size:          16px;                  /* small/icon-size */
  --chip-sm-padding-left-right: var(--space-md);       /* small/padding-left-right */
  --chip-sm-padding-top-bottom: var(--space-xs);       /* small/padding-top-bottom */
  --chip-sm-padding-icon:       var(--space-sm);       /* small/padding-icon */
  --chip-sm-padding-between:    var(--space-sm);       /* small/padding-between */


  /* ============================================================
     COLOR — SEMANTIC EXTENSIONS (from Figma base-2.0 diff)
     These token families were present in Figma but missing in CSS.
     ============================================================ */

  /* ---- Success (color/success/*) ---- */
  --color-success-success:            #016630;   /* green-800 */
  --color-success-on-success:         #f0fdf4;   /* green-50 */
  --color-success-container:          #dcfce7;   /* green-100 */
  --color-success-on-success-container: #032e15; /* green-950 */

  /* ---- Error (color/error/*) ---- */
  --color-error-error:                #c10007;   /* red-700 */
  --color-error-on-error:             #ffffff;   /* white */
  --color-error-container:            #ffc9c9;   /* red-200 */
  --color-error-on-error-container:   #460809;   /* red-950 */

  /* ---- Warning container extensions (color/warning/*) ---- */
  --color-warning-warning-container:      #ffedd4;   /* orange-100 */
  --color-warning-on-warning-container:   #441306;   /* orange-950 */

  /* ---- Tertiary container (color/tertiary-container/*) ---- */
  --color-tertiary-container-low:         #ffccd3;   /* rose-200 */
  --color-tertiary-container:             #c70036;   /* rose-700 */
  --color-tertiary-container-on:          #1c012e;   /* purple-10 */
  --color-tertiary-on-container:          #ffe4e6;   /* rose-100 */
  --color-tertiary:                       #650aa1;   /* purple-35 */
  --color-tertiary-on-tertiary:           #fffaff;   /* purple-99 */
  --color-tertiary-inverse:               #d8a0fa;   /* purple-80 */
  --color-tertiary-dark:                  #470373;   /* purple-25 */

  /* ---- Quaternary container (color/quaternary/*) ---- */
  --color-quaternary-container-low:      #b9f8cf;   /* green-200 */
  --color-quarternary-container-low:      var(--color-quaternary-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container:          #016630;   /* green-800 */
  --color-quarternary-container:          var(--color-quaternary-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quarternary-container-on:       #012e23;   /* teal-10 */
  --color-quaternary-on-container:       #f0fdf4;   /* green-50 */
  --color-quarternary-on-container:       var(--color-quaternary-on-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quarternary:                    #0fb88d;   /* teal-40 */
  --color-quarternary-on-quarternary:     #cdfaef;   /* teal-90 */
  --color-quarternary-inverse:            #a0fae3;   /* teal-80 */
  --color-quarternary-dark:               #014534;   /* teal-15 */

  /* ---- Background (color/background/*) ---- */
  --color-on-background:      #171717;   /* neutral-900 */

  /* ---- Surface extended (color/surface/*) ---- */
  --color-surface-dim:                #e5e5e5;   /* neutral-200 */
  --color-surface-bright:             #ffffff;   /* neutral-100 */
  --color-surface-on-surface-inverse: #f5f5f5;   /* neutral-100 */
  --color-surface-inverse-surface:    #262626;   /* neutral-800 */

  /* ---- Neutral outline variant ---- */
  --color-neutral-outline-outline-var: #e5e5e5;   /* neutral-200 */
  --color-neutral-outline-container:   #d4d4d4;   /* neutral-300 */

  /* ---- Utility ---- */
  --color-scrim:        #00000052;   /* black @ 32% — modal / mobile scrim (dark: black @ 64%) */
  --color-surface-tint: #162456;   /* primary-primary */

  /* ---- Focus ---- */
  --focus-border: #4f39f6;   /* secondary-container-secondary-container */

  /* ---- Added from Figma System Tokens (2026-10-06) ---- */
  --color-surface-on-surface-light-fixed:                    #f5f5f5;   /* neutral-100 */
  --color-surface-variant:                                   #d4d4d4;   /* neutral-300 */
  --color-surface-container-inverse:                         #171717;   /* neutral-900 */
  --color-background:                                        #fafafa;   /* neutral-50 */
  --color-shadow:                                            #000000;   /* black */
  --color-primary-on-container-low:                          #162456;   /* blue-950 */
  --color-primary-container-inverse:                         #162456;   /* blue-950 */
  --color-primary-on-container-inverse:                      #eff6ff;   /* blue-50 */
  --color-tertiary-on-container-low:                         #4d0218;   /* rose-950 */
  --color-tertiary-container-high:                           #a50036;   /* rose-800 */
  --color-tertiary-on-container-high:                        #ffe4e6;   /* rose-100 */
  --color-tertiary-container-fixed:                          #c70036;   /* rose-700 */
  --color-tertiary-on-container-fixed:                       #ffe4e6;   /* rose-100 */
  --color-quaternary-on-container-low:                      #032e15;   /* green-950 */
  --color-quarternary-on-container-low:                      var(--color-quaternary-on-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container-high:                        #0d542b;   /* green-900 */
  --color-quarternary-container-high:                        var(--color-quaternary-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-on-container-high:                     #f0fdf4;   /* green-50 */
  --color-quarternary-on-container-high:                     var(--color-quaternary-on-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container-fixed:                       #016630;   /* green-800 */
  --color-quarternary-container-fixed:                       var(--color-quaternary-container-fixed);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-on-container-fixed:                    #f0fdf4;   /* green-50 */
  --color-quarternary-on-container-fixed:                    var(--color-quaternary-on-container-fixed);   /* deprecated: renamed in Figma 2026-11-04 */
  --interaction-primary-elevated-icon:                       #162456;   /* primary-primary */
  --interaction-primary-filled-inverse-icon:                 #162456;   /* primary-primary */
  --interaction-primary-filled-inverse-state-layer-selected: #8ec5ff;   /* blue-300 */
  --interaction-primary-tonal-icon:                          #162456;   /* primary-on-container */
  --interaction-primary-text-icon:                           #162456;   /* primary-primary */
  --interaction-primary-text-icon-button:                    #525252;   /* surface-on-surface-var */
  --interaction-primary-text-inverse-icon:                   #eff6ff;   /* primary-on-primary */
  --interaction-primary-outlined-icon:                       #162456;   /* primary-primary */
  --interaction-primary-outlined-icon-button:                #525252;   /* surface-on-surface-var */
  --interaction-primary-link:                                #162456;   /* primary-primary */
  --interaction-primary-link-state-hovered:                  #1c398e;   /* blue-900 */
  --interaction-primary-link-state-pressed:                  #193cb8;   /* primary-state-filled-pressed */
  --interaction-primary-link-state-focused:                  #193cb8;   /* primary-state-filled-focused */
  --interaction-primary-link-state-dragged:                  #1447e6;   /* primary-state-filled-dragged */
  --interaction-error-filled-icon:                           #ffffff;   /* error-on-error */
  --interaction-error-text-icon:                             #460809;   /* error-on-error-container */
  --focus-border-width: 2px;

  /* ---- User avatars (user/*) ---- */
  --user-1:        #c10007;   /* red-700 */
  --user-2:        #c70036;   /* rose-700 */
  --user-3:        #ca3500;   /* orange-700 */
  --user-4:        #00a63e;   /* green-600 */
  --user-5:        #0069a8;   /* sky-700 */
  --user-6:        #193cb8;   /* blue-800 */
  --user-7:        #6e11b0;   /* purple-800 */
  --user-on-user:  #e5e5e5;

  /* ---- Interaction / secondary ---- */
  --interaction-secondary-filled-container:             #4f39f6;
  --interaction-secondary-filled-label:                 #eef2ff;
  --interaction-secondary-filled-icon:                  #eef2ff;
  --interaction-secondary-filled-state-layer-hovered:   #432dd7;
  --interaction-secondary-filled-state-layer-focused:   #372aac;
  --interaction-secondary-filled-state-layer-pressed:   #372aac;
  --interaction-secondary-filled-state-layer-dragged:   #312c85;
  --interaction-secondary-tonal-container:              #e0e7ff;
  --interaction-secondary-tonal-label:                  #1e1a4d;
  --interaction-secondary-tonal-icon:                   #1e1a4d;
  --interaction-secondary-tonal-state-layer-hovered:    #c6d2ff;
  --interaction-secondary-tonal-state-layer-focused:    #a3b3ff;
  --interaction-secondary-tonal-state-layer-selected:   #e0e7ff;
  --interaction-secondary-tonal-state-layer-pressed:    #a3b3ff;
  --interaction-secondary-tonal-state-layer-dragged:    #7c86ff;

  /* ---- Interaction / tertiary ---- */
  --interaction-tertiary-filled-container:              #c70036;
  --interaction-tertiary-filled-label:                  #ffe4e6;
  --interaction-tertiary-filled-icon:                   #ffe4e6;
  --interaction-tertiary-filled-state-layer-hovered:    #a50036;
  --interaction-tertiary-filled-state-layer-focused:    #8b0836;
  --interaction-tertiary-filled-state-layer-pressed:    #8b0836;
  --interaction-tertiary-filled-state-layer-dragged:    #4d0218;

  /* ---- Interaction / success ---- */
  --interaction-success-filled-container:               #016630;
  --interaction-success-filled-label:                   #f0fdf4;
  --interaction-success-filled-icon:                    #f0fdf4;
  --interaction-success-text-label:                     #016630;
  --interaction-success-text-icon:                      #016630;
  --interaction-success-filled-state-layer-hovered:     #0d542b;
  --interaction-success-filled-state-layer-focused:     #032e15;
  --interaction-success-filled-state-layer-pressed:     #032e15;
  --interaction-success-filled-state-layer-dragged:     #032e15;
  --interaction-success-text-state-layer-hovered:       #dcfce7;
  --interaction-success-text-state-layer-focused:       #b9f8cf;
  --interaction-success-text-state-layer-pressed:       #b9f8cf;
  --interaction-success-text-state-layer-dragged:       #7bf1a8;

  /* ---- Interaction / warning ---- */
  --interaction-warning-filled-container:               #ffb86a;
  --interaction-warning-filled-label:                   #7e2a0c;
  --interaction-warning-filled-icon:                    #7e2a0c;
  --interaction-warning-text-label:                     #7e2a0c;
  --interaction-warning-text-icon:                      #7e2a0c;
  --interaction-warning-filled-state-layer-hovered:     #ffd6a8;
  --interaction-warning-filled-state-layer-focused:     #ffedd4;
  --interaction-warning-filled-state-layer-pressed:     #ffedd4;
  --interaction-warning-filled-state-layer-dragged:     #fff7ed;
  --interaction-warning-text-state-layer-hovered:       #ffedd4;
  --interaction-warning-text-state-layer-focused:       #ffd6a8;
  --interaction-warning-text-state-layer-pressed:       #ffd6a8;
  --interaction-warning-text-state-layer-dragged:       #ffb86a;

  /* ---- Interaction / neutral ---- */
  --interaction-neutral-container:                      #fafafa;
  --interaction-neutral-label:                          #171717;
  --interaction-neutral-icon:                           #171717;
  --interaction-neutral-outline:                        #a1a1a1;
  --interaction-neutral-state-layer-hovered:            #e5e5e5;
  --interaction-neutral-state-layer-focused:            #d4d4d4;
  --interaction-neutral-state-layer-pressed:            #d4d4d4;
  --interaction-neutral-state-layer-dragged:            #a1a1a1;
  --interaction-neutral-state-layer-selected:           #e5e5e5;

  /* ---- Interaction / disabled ---- */
  --interaction-disabled-container:                     #e5e5e5;
  --interaction-disabled-label:                         #737373;
  --interaction-disabled-icon:                          #737373;

  /* ---- Charts / series ---- */
  --charts-series-1:         #024a70;
  --charts-series-2:         #0084d1;
  --charts-series-3:         #00bcff;
  --charts-series-4:         #b8e6fe;
  --charts-series-5:         #59168b;
  --charts-series-6:         #8200db;
  --charts-series-7:         #c27aff;
  --charts-series-8:         #e9d5ff;
  --charts-series-9:         #8a0194;
  --charts-series-10:        #c800de;
  --charts-series-11:        #ed6aff;
  --charts-series-12:        #f6cfff;
  --charts-series-13:        #a50036;
  --charts-series-14:        #ec003f;
  --charts-series-15:        #ff637e;
  --charts-series-16:        #ffccd3;
  --charts-series-other-1:   #525252;
  --charts-series-other-2:   #737373;
  --charts-series-other-3:   #a1a1a1;
  --charts-series-warning-1: #9f2d00;
  --charts-series-warning-2: #ff6900;
  --charts-series-warning-3: #ffb86a;
  --charts-series-warning-4: #ffedd4;
  --charts-series-success-1: #008236;
  --charts-series-success-2: #00c950;
  --charts-series-success-3: #7bf1a8;
  --charts-series-success-4: #dcfce7;
  --charts-series-danger-1:  #9f0712;
  --charts-series-danger-2:  #e7000b;
  --charts-series-danger-3:  #ff6467;
  --charts-series-danger-4:  #ffc9c9;

  /* ---- Charts / chrome (tooltip, axis pointer, primary line) ---- */
  --charts-tooltip-bg:     #ffffff;
  --charts-tooltip-border: rgba(0, 0, 0, 0.08);
  --charts-axis-pointer:   #c4c7d0;   /* neutral-80-var */
  --charts-line-primary:   #1b5de0;   /* navy-50 */

  /* ---- Banners ---- */
  --banners-01-container:  #ffb86a;
  --banners-01-on-surface: #441306;
  --banners-02-container:  #005f5a;
  --banners-02-on-surface: #f0fdfa;
  --banners-03-container:  #007595;
  --banners-03-on-surface: #ecfeff;
  --banners-04-container:  #b8e6fe;
  --banners-04-on-surface: #052f4a;
  --banners-05-container:  #c6d2ff;
  --banners-05-on-surface: #372aac;
  --banners-06-container:  #1c398e;
  --banners-06-on-surface: #eff6ff;
  --banners-07-container:  #9f2d00;
  --banners-07-on-surface: #fff7ed;

  /* ---- Opacity / neutral ---- */
  --opacity-neutral-00-opacity-0:   #00000000;
  --opacity-neutral-00-opacity-10:  #0000001a;
  --opacity-neutral-00-opacity-20:  #00000033;
  --opacity-neutral-00-opacity-30:  #0000004d;
  --opacity-neutral-00-opacity-40:  #00000066;
  --opacity-neutral-00-opacity-50:  #00000080;
  --opacity-neutral-00-opacity-60:  #00000099;
  --opacity-neutral-00-opacity-70:  #000000b2;
  --opacity-neutral-00-opacity-80:  #000000cc;
  --opacity-neutral-00-opacity-90:  #000000e5;
  --opacity-neutral-100-opacity-0:  #ffffff00;
  --opacity-neutral-100-opacity-10: #ffffff1a;
  --opacity-neutral-100-opacity-20: #ffffff33;
  --opacity-neutral-100-opacity-30: #ffffff4d;
  --opacity-neutral-100-opacity-40: #ffffff66;
  --opacity-neutral-100-opacity-50: #ffffff80;
  --opacity-neutral-100-opacity-60: #ffffff99;
  --opacity-neutral-100-opacity-70: #ffffffb2;
  --opacity-neutral-100-opacity-80: #ffffffcc;
  --opacity-neutral-100-opacity-90: #ffffffe5;

  /* ---- Liquid glass ---- */
  --liquid-glass-states-fill-enabled:  #ffffff4d;
  --liquid-glass-states-fill-selected: #0000001a;

  /* ---- Figma 2026-11-04: state colors + container-low interaction sets ---- */
  --color-primary-state-filled-hover:                        #1c398e;   /* blue-900 */
  --color-primary-state-filled-pressed:                      #193cb8;   /* blue-800 */
  --color-primary-state-filled-focused:                      #193cb8;   /* blue-800 */
  --color-primary-state-filled-dragged:                      #1447e6;   /* blue-700 */
  --color-primary-state-tonal-hover:                         #8ec5ff;   /* blue-300 */
  --color-primary-state-tonal-pressed:                       #51a2ff;   /* blue-400 */
  --color-primary-state-tonal-focused:                       #51a2ff;   /* blue-400 */
  --color-primary-state-tonal-dragged:                       #51a2ff;   /* blue-400 */
  --color-primary-state-surface-hover:                       #dbeafe;   /* blue-100 */
  --color-primary-state-surface-pressed:                     #bedbff;   /* blue-200 */
  --color-primary-state-surface-focused:                     #bedbff;   /* blue-200 */
  --color-primary-state-surface-dragged:                     #8ec5ff;   /* blue-300 */
  --color-secondary-state-filled-hover:                      #432dd7;   /* indigo-700 */
  --color-secondary-state-filled-pressed:                    #372aac;   /* indigo-800 */
  --color-secondary-state-filled-drag:                       #312c85;   /* indigo-900 */
  --color-secondary-state-tonal-hover:                       #c6d2ff;   /* indigo-200 */
  --color-secondary-state-tonal-pressed:                     #a3b3ff;   /* indigo-300 */
  --color-secondary-state-tonal-drag:                        #7c86ff;   /* indigo-400 */
  --color-tertiary-state-filled-hover:                       #a50036;   /* rose-800 */
  --color-tertiary-state-filled-pressed:                     #8b0836;   /* rose-900 */
  --color-tertiary-state-filled-drag:                        #4d0218;   /* rose-950 */
  --color-error-state-filled-hover:                          #9f0712;   /* red-800 */
  --color-error-state-filled-pressed:                        #82181a;   /* red-900 */
  --color-error-state-filled-drag:                           #460809;   /* red-950 */
  --color-error-state-surface-hover:                         #ffe2e2;   /* red-100 */
  --color-error-state-surface-pressed:                       #ffc9c9;   /* red-200 */
  --color-error-state-surface-drag:                          #ffa2a2;   /* red-300 */
  --color-warning-state-filled-hover:                        #ffd6a8;   /* orange-200 */
  --color-warning-state-filled-pressed:                      #ffedd4;   /* orange-100 */
  --color-warning-state-filled-drag:                         #fff7ed;   /* orange-50 */
  --color-warning-state-surface-hover:                       #ffedd4;   /* orange-100 */
  --color-warning-state-surface-pressed:                     #ffd6a8;   /* orange-200 */
  --color-warning-state-surface-drag:                        #ffb86a;   /* orange-300 */
  --color-success-state-filled-hover:                        #0d542b;   /* green-900 */
  --color-success-state-filled-pressed:                      #032e15;   /* green-950 */
  --color-success-state-filled-drag:                         #032e15;   /* green-950 */
  --color-success-state-surface-hover:                       #dcfce7;   /* green-100 */
  --color-success-state-surface-pressed:                     #b9f8cf;   /* green-200 */
  --color-success-state-surface-drag:                        #7bf1a8;   /* green-300 */
  --color-secondary-state-container-low-hover:               #a3b3ff;   /* indigo-300 */
  --color-secondary-state-container-low-pressed:             #7c86ff;   /* indigo-400 */
  --color-secondary-state-container-low-dragged:             #7c86ff;   /* indigo-400 */
  --color-secondary-state-container-low-focused:             #7c86ff;   /* indigo-400 */
  --interaction-secondary-container-low-container:           #c6d2ff;   /* secondary-container-low-secondary-container-low */
  --interaction-secondary-container-low-state-layer-hovered: #a3b3ff;   /* indigo-300 */
  --interaction-secondary-container-low-state-layer-focused: #7c86ff;   /* indigo-400 */
  --interaction-secondary-container-low-state-layer-pressed: #7c86ff;   /* indigo-400 */
  --interaction-secondary-container-low-state-layer-dragged: #7c86ff;   /* indigo-400 */
  --color-tertiary-state-container-low-hover:                #ffa1ad;   /* rose-300 */
  --color-tertiary-state-container-low-pressed:              #ff637e;   /* rose-400 */
  --color-tertiary-state-container-low-dragged:              #ff637e;   /* rose-400 */
  --color-tertiary-state-container-low-focused:              #ff637e;   /* rose-400 */
  --interaction-tertiary-container-low-container:            #ffccd3;   /* tertiary-container-low-tertiary-container-low */
  --interaction-tertiary-container-low-state-layer-hovered:  #ffa1ad;   /* rose-300 */
  --interaction-tertiary-container-low-state-layer-focused:  #ff637e;   /* rose-400 */
  --interaction-tertiary-container-low-state-layer-pressed:  #ff637e;   /* rose-400 */
  --interaction-tertiary-container-low-state-layer-dragged:  #ff637e;   /* rose-400 */
  --interaction-secondary-container-low-label:               #1e1a4d;   /* secondary-container-low-on-secondary-container-low */
  --interaction-secondary-container-low-icon:                #1e1a4d;   /* secondary-container-low-on-secondary-container-low */
  --interaction-tertiary-container-low-label:                #4d0218;   /* tertiary-container-low-on-tertiary-container-low */
  --interaction-tertiary-container-low-icon:                 #4d0218;   /* tertiary-container-low-on-tertiary-container-low */
  --color-primary-state-text-inverse-hover:                  #1c398e;   /* blue-900 */
  --color-primary-state-text-inverse-pressed:                #193cb8;   /* blue-800 */
  --color-primary-state-text-inverse-dragged:                #1447e6;   /* blue-700 */
  --color-primary-state-text-inverse-focused:                #193cb8;   /* blue-800 */
  --interaction-disabled-outline:                            #d4d4d4;   /* neutral-300 */
  --color-neutral-state-surface-hover:                       #e5e5e5;   /* neutral-200 */
  --color-neutral-state-surface-pressed:                     #d4d4d4;   /* neutral-300 */
  --color-neutral-state-surface-dragged:                     #a1a1a1;   /* neutral-400 */
  --color-neutral-state-surface-focused:                     #d4d4d4;   /* neutral-300 */
}


/* ============================================================
   LAYOUT MODES
   Figma variables: Layout collection — Tablet / Mobile / Desktop-LG modes.
   Figma has no breakpoint variables; thresholds sit between the mode
   artboard widths (Mobile 390, Tablet 1024, Desktop 1280, Desktop-LG 1472).
   Tokens not listed keep their Desktop value.
   ============================================================ */

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    --screen-width:              390px;   /* screen/width */
    --container-margin:          8px;     /* container/margin */
    --container-gap:             8px;     /* container/gap */
    --container-v-padding:       8px;     /* container/v-padding */
    --container-main-width:      376px;   /* container/main/width */
    --container-main-full-width: 374px;   /* container/main-full/width */
    --container-main-full-gap:   16px;    /* container/main-full/gap */
    --container-sidebar-width:   376px;   /* container/sidebar/width */
    --container-sidebar-gap:     8px;     /* container/sidebar/gap */
    --grid-columns-count:        8;       /* grid-styles/columns-count */
    --grid-columns-width:        40px;    /* grid-styles/columns-width */
    --grid-columns-gutter:       8px;     /* grid-styles/columns-gutter */
  }
}

/* Tablet: 768px – 1279px */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --screen-width:              1024px;  /* screen/width */
    --container-margin:          8px;     /* container/margin */
    --container-v-padding:       8px;     /* container/v-padding */
    --container-main-width:      624px;   /* container/main/width */
    --container-main-full-width: 1008px;  /* container/main-full/width */
    --container-sidebar-width:   368px;   /* container/sidebar/width */
    --grid-columns-count:        8;       /* grid-styles/columns-count */
    --grid-columns-width:        112px;   /* grid-styles/columns-width */
  }
}

/* Desktop-LG: >= 1472px */
@media (min-width: 1472px) {
  :root {
    --screen-width:              1472px;  /* screen/width */
    --container-main-width:      944px;   /* container/main/width */
    --container-main-full-width: 1424px;  /* container/main-full/width */
    --container-sidebar-width:   464px;   /* container/sidebar/width */
    --grid-columns-width:        104px;   /* grid-styles/columns-width */
  }
}


/* ============================================================
   DARK MODE
   Applied when [data-theme="dark"] is set on <html> or a parent.
   Overrides surface and interaction System Tokens.
   Gradient stops confirmed from Figma base-2.0 Dark frame (5856:12695).
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {

  /* ---- Surface ---- */
  --color-surface-default:               #171717;
  --color-surface-on-surface:            #f5f5f5;
  --color-surface-container-lowest:      #0a0a0a;
  --color-surface-container-low:         #171717;
  --color-surface-container:             #262626;
  --color-surface-container-high:        #404040;
  --color-surface-container-highest:     #525252;
  --color-surface-container-highest-alt: var(--color-neutral-outline-container);   /* deprecated: no Figma source since 2026-10-29 */

  /* ---- Surface extended / background / utility ---- */
  --color-surface-dim:                #0a0a0a;   /* neutral-950 */
  --color-surface-bright:             #404040;   /* neutral-700 */
  --color-surface-on-surface-inverse: #262626;   /* neutral-800 */
  --color-surface-inverse-surface:    #e5e5e5;   /* neutral-90 */
  --color-on-background:              #e5e5e5;   /* neutral-90 */
  --color-surface-tint:               #8ec5ff;   /* primary-primary */
  --color-scrim:                      #000000a3; /* black @ 64% */

  /* ---- Gradients ---- */
  --gradient-primary-start:   #8ec5ff;
  --gradient-primary-stop:    #51a2ff;
  --gradient-secondary-start: #a3b3ff;
  --gradient-secondary-stop:  #7c86ff;
  --gradient-success-start:   #b9f8cf;   /* green-200 */
  --gradient-success-stop:    #7bf1a8;   /* green-300 */
  --gradient-warning-start:   #ffd6a8;   /* orange-200 */
  --gradient-error-start:     #ffa2a2;   /* red-300 */
  --gradient-error-stop:      #ff6467;   /* red-400 */

  /* ---- Interaction / primary / filled ---- */
  --interaction-primary-filled-container:           #8ec5ff;
  --interaction-primary-filled-label:               #162456;
  --interaction-primary-filled-icon:                #162456;
  --interaction-primary-filled-state-layer-hovered: #bedbff;
  --interaction-primary-filled-state-layer-pressed: #dbeafe;
  --interaction-primary-filled-state-layer-focused: #dbeafe;
  --interaction-primary-filled-state-layer-dragged: #eff6ff;

  /* ---- Interaction / primary / elevated ---- */
  --interaction-primary-elevated-container:          #171717;
  --interaction-primary-elevated-label:              #8ec5ff;
  --interaction-primary-elevated-state-layer-hovered: #1c398e;
  --interaction-primary-elevated-state-layer-pressed: #193cb8;
  --interaction-primary-elevated-state-layer-focused: #193cb8;
  --interaction-primary-elevated-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / filled-inverse ---- */
  --interaction-primary-filled-inverse-container:          #171717;
  --interaction-primary-filled-inverse-label:              #8ec5ff;
  --interaction-primary-filled-inverse-state-layer-hovered: #1c398e;
  --interaction-primary-filled-inverse-state-layer-pressed: #193cb8;
  --interaction-primary-filled-inverse-state-layer-focused: #193cb8;
  --interaction-primary-filled-inverse-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / tonal ---- */
  --interaction-primary-tonal-container: #1c398e;
  --interaction-primary-tonal-label:     #bedbff;
  --interaction-primary-tonal-state-layer-hovered: #193cb8;
  --interaction-primary-tonal-state-layer-pressed: #1447e6;
  --interaction-primary-tonal-state-layer-focused: #1447e6;
  --interaction-primary-tonal-state-layer-dragged: #1447e6;

  /* ---- Interaction / primary / outlined ---- */
  --interaction-primary-outlined-outline: #404040;
  --interaction-primary-outlined-label:   #8ec5ff;
  --interaction-primary-outlined-state-layer-hovered: #1c398e;
  --interaction-primary-outlined-state-layer-pressed: #193cb8;
  --interaction-primary-outlined-state-layer-focused: #193cb8;
  --interaction-primary-outlined-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / text ---- */
  --interaction-primary-text-label: #8ec5ff;
  --interaction-primary-text-state-layer-hovered: #1c398e;
  --interaction-primary-text-state-layer-pressed: #193cb8;
  --interaction-primary-text-state-layer-focused: #193cb8;
  --interaction-primary-text-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / text-inverse ---- */
  --interaction-primary-text-inverse-label:              #162456;
  --interaction-primary-text-inverse-state-layer-hovered: #bedbff;
  --interaction-primary-text-inverse-state-layer-pressed: #dbeafe;
  --interaction-primary-text-inverse-state-layer-focused: #dbeafe;
  --interaction-primary-text-inverse-state-layer-dragged: #eff6ff;

  /* ---- Interaction / error / filled ---- */
  --interaction-error-filled-container: #ffa2a2;
  --interaction-error-filled-label:     #000000;
  --interaction-error-filled-state-layer-hovered: #ffa2a2;
  --interaction-error-filled-state-layer-pressed: #ff6467;
  --interaction-error-filled-state-layer-focused: #ff6467;
  --interaction-error-filled-state-layer-dragged: #fb2c36;

  /* ---- Interaction / error / text ---- */
  --interaction-error-text-label: #ffc9c9;
  --interaction-error-text-state-layer-hovered: #460809;
  --interaction-error-text-state-layer-pressed: #82181a;
  --interaction-error-text-state-layer-focused: #82181a;
  --interaction-error-text-state-layer-dragged: #9f0712;

  /* ---- Outage pin body colors dark ---- */
  --color-outage-pin-01: #a0befa;   /* navy-80   · active outage */
  --color-outage-pin-02: #a3faa0;   /* green-80  · crew on-site */
  --color-outage-pin-03: #a0a0fa;   /* cornflower-80 · scheduled */
  --color-outage-pin-04: #c97a2e;   /* orange-50 · flagged */
  --color-outage-pin-05: #faa4a0;   /* red-80    · resolved */
  --color-outage-pin-icon: #1a1a1a; /* near-black · icon fill */
  --color-map-pin-avail-unsel: #1a2e1a; /* dark-green · available unselected */
  --color-map-pin-avail-sel:   #a0befa; /* navy-80    · available selected */
  --color-map-pin-busy:        #c97a2e; /* orange-50  · busy */

  /* ---- Primary color dark overrides ---- */
  --color-primary:                       #8ec5ff;   /* blue-300 */
  --color-primary-container-low:         #162456;   /* blue-950 */
  --color-primary-container:             #1c398e;   /* blue-900 */
  --color-primary-on-container:          #bedbff;   /* blue-200 */
  --color-primary-on-primary-container:  #bedbff;   /* blue-200 */
  --color-primary-container-on:          #bedbff;   /* blue-200 */
  --color-primary-on-primary:            #162456;   /* blue-950 */
  --color-on-primary:                    #162456;   /* blue-950 */
  --color-primary-dark:                  #a0befa;   /* navy-80 */
  --color-primary-inverse:               #162456;   /* blue-950 */

  /* ---- Secondary color dark overrides (fixed tokens are mode-invariant; light only) ---- */
  --color-secondary:                     #a3b3ff;   /* indigo-300 */
  --color-secondary-on-secondary:        #1e1a4d;   /* indigo-950 */
  --color-secondary-inverse:             #372aac;   /* indigo-800 */
  --color-secondary-container-lowest:    #312c85;   /* indigo-900 */
  --color-secondary-on-container-lowest: #c6d2ff;   /* indigo-200 */
  --color-secondary-container-low:       #432dd7;   /* indigo-700 */
  --color-secondary-on-container-low:    #c6d2ff;   /* indigo-200 */
  --color-secondary-container:           #a3b3ff;   /* indigo-300 */
  --color-secondary-on-container:        #312c85;   /* indigo-900 */
  --color-secondary-container-high:      #c6d2ff;   /* indigo-200 */
  --color-secondary-on-container-high:   #1e1a4d;   /* indigo-950 */
  --color-secondary-container-inverse:   #4f39f6;   /* indigo-600 */
  --color-secondary-on-container-inverse: #eef2ff;   /* indigo-50 */

  /* ---- Warning dark overrides ---- */
  --color-warning-warning:     #9f2d00;   /* orange-800 */
  --color-warning-on-warning:  #ffedd4;   /* orange-100 */
  --color-warning-warning-container:      #9f2d00;   /* orange-800 */
  --color-warning-on-warning-container:   #ffedd4;   /* orange-100 */

  /* ---- Success dark overrides ---- */
  --color-success-success:             #b9f8cf;   /* green-200 */
  --color-success-on-success:          #016630;   /* green-800 */
  --color-success-container:           #016630;   /* green-800 */
  --color-success-on-success-container: #dcfce7;  /* green-100 */

  /* ---- Error dark overrides ---- */
  --color-error-error:                 #ffa2a2;   /* red-300 */
  --color-error-on-error:              #000000;   /* black */
  --color-error-container:             #9f0712;   /* red-800 */
  --color-error-on-error-container:    #ffc9c9;   /* red-200 */

  /* ---- Surface secondary text dark ---- */
  --color-surface-on-surface-var: #d4d4d4;   /* neutral-300 */

  /* ---- Interaction aliases dark ---- */
  --interaction-primary-tonal-hovered: #02205c;   /* = tonal-state-layer-hovered */

  /* ---- Interaction / checkbox dark ---- */
  --color-neutral-outline:                          #737373;
  --color-neutral-outline-outline-var:              #404040;   /* neutral-700 */
  --color-neutral-outline-container:                #404040;   /* neutral-700 */
  --interaction-checkbox-outline:                   #666666;

  /* ---- Shared state layer tokens dark ---- */
  --states-on-surface-08:  rgba(229, 229, 229, 0.08);  /* on-surface dark @ 8% */
  --states-on-surface-12:  rgba(229, 229, 229, 0.12);  /* on-surface dark @ 12% */
  --states-primary-08:     rgba(160, 190, 250, 0.08);  /* states/primary dark (#a0befa) @ 8% */
  --states-primary-12:     rgba(160, 190, 250, 0.12);  /* states/primary dark (#a0befa) @ 12% */
  --states-primary-16:     rgba(160, 190, 250, 0.16);  /* states/primary dark (#a0befa) @ 16% */
  --states-on-primary-12:  rgba(2, 32, 92, 0.12);      /* on-primary dark (#02205c) @ 12% */
  --states-error-08:       rgba(250, 164, 160, 0.08);  /* states/error dark (#faa4a0) @ 8% */
  --states-error-12:       rgba(250, 164, 160, 0.12);  /* states/error dark (#faa4a0) @ 12% */
  --states-surface-var-12: rgba(52, 54, 59, 0.12);     /* surface-container-highest dark @ 12% */

  /* ---- Focus dark (Figma System Tokens focus/border, Dark = cornflower/80) ---- */
  --focus-border: #a3b3ff;   /* secondary-container-secondary-container */

  /* ---- Neutral palette dark overrides ---- */
  --color-neutral-40: #aaaaaa;   /* neutral-67 — lifted for contrast on dark surfaces */

  /* ---- Interaction / secondary dark ---- */
  --interaction-secondary-filled-container:            #a3b3ff;
  --interaction-secondary-filled-label:                #312c85;
  --interaction-secondary-filled-icon:                 #312c85;
  --interaction-secondary-filled-state-layer-hovered:  #c6d2ff;
  --interaction-secondary-filled-state-layer-focused:  #e0e7ff;
  --interaction-secondary-filled-state-layer-pressed:  #e0e7ff;
  --interaction-secondary-filled-state-layer-dragged:  #eef2ff;
  --interaction-secondary-tonal-container:             #312c85;
  --interaction-secondary-tonal-label:                 #c6d2ff;
  --interaction-secondary-tonal-icon:                  #c6d2ff;
  --interaction-secondary-tonal-state-layer-hovered:   #372aac;
  --interaction-secondary-tonal-state-layer-focused:   #432dd7;
  --interaction-secondary-tonal-state-layer-selected:  #312c85;
  --interaction-secondary-tonal-state-layer-pressed:   #432dd7;
  --interaction-secondary-tonal-state-layer-dragged:   #432dd7;

  /* ---- Interaction / tertiary dark ---- */
  --interaction-tertiary-filled-container:           #ffa1ad;
  --interaction-tertiary-filled-label:               #8b0836;
  --interaction-tertiary-filled-icon:                #8b0836;
  --interaction-tertiary-filled-state-layer-hovered: #ffccd3;
  --interaction-tertiary-filled-state-layer-focused: #ffe4e6;
  --interaction-tertiary-filled-state-layer-pressed: #ffe4e6;
  --interaction-tertiary-filled-state-layer-dragged: #fff1f2;

  /* ---- Interaction / success dark ---- */
  --interaction-success-filled-container:           #b9f8cf;
  --interaction-success-filled-label:               #016630;
  --interaction-success-filled-icon:                #016630;
  --interaction-success-filled-state-layer-hovered: #dcfce7;
  --interaction-success-filled-state-layer-focused: #f0fdf4;
  --interaction-success-filled-state-layer-pressed: #f0fdf4;
  --interaction-success-filled-state-layer-dragged: #f0fdf4;
  --interaction-success-text-label:                 #b9f8cf;
  --interaction-success-text-icon:                  #b9f8cf;
  --interaction-success-text-state-layer-hovered:   #0d542b;
  --interaction-success-text-state-layer-focused:   #016630;
  --interaction-success-text-state-layer-pressed:   #016630;
  --interaction-success-text-state-layer-dragged:   #016630;

  /* ---- Interaction / warning dark ---- */
  --interaction-warning-filled-container:           #9f2d00;
  --interaction-warning-filled-label:               #ffedd4;
  --interaction-warning-filled-icon:                #ffedd4;
  --interaction-warning-filled-state-layer-hovered: #7e2a0c;
  --interaction-warning-filled-state-layer-focused: #441306;
  --interaction-warning-filled-state-layer-pressed: #441306;
  --interaction-warning-filled-state-layer-dragged: #441306;
  --interaction-warning-text-label:                 #ffedd4;
  --interaction-warning-text-icon:                  #ffedd4;
  --interaction-warning-text-state-layer-hovered:   #7e2a0c;
  --interaction-warning-text-state-layer-focused:   #9f2d00;
  --interaction-warning-text-state-layer-pressed:   #9f2d00;
  --interaction-warning-text-state-layer-dragged:   #ca3500;

  /* ---- Interaction / disabled dark ---- */
  --interaction-disabled-container: #262626;
  --interaction-disabled-label:     #737373;
  --interaction-disabled-icon:      #737373;

  /* ---- Interaction / neutral dark ---- */
  --interaction-neutral-container:             #171717;
  --interaction-neutral-label:                 #f5f5f5;
  --interaction-neutral-icon:                  #f5f5f5;
  --interaction-neutral-state-layer-hovered:  #262626;
  --interaction-neutral-state-layer-focused:  #404040;
  --interaction-neutral-state-layer-pressed:  #404040;
  --interaction-neutral-state-layer-dragged:  #525252;
  --interaction-neutral-state-layer-selected: #262626;
  --interaction-neutral-outline:              #404040;

  /* ---- Charts dark (inverted luminance) ---- */
  --charts-series-1:  #b8e6fe;
  --charts-series-2:  #00bcff;
  --charts-series-3:  #0084d1;
  --charts-series-4:  #024a70;
  --charts-series-5:  #e9d5ff;
  --charts-series-6:  #c27aff;
  --charts-series-7:  #8200db;
  --charts-series-8:  #59168b;
  --charts-series-9:  #f6cfff;
  --charts-series-10: #ed6aff;
  --charts-series-11: #c800de;
  --charts-series-12: #8a0194;
  --charts-series-13: #ffccd3;
  --charts-series-14: #ff637e;
  --charts-series-15: #ec003f;
  --charts-series-16: #a50036;
  --charts-series-other-1:   #d4d4d4;
  --charts-series-other-2:   #737373;
  --charts-series-other-3:   #525252;
  --charts-series-warning-1: #ffedd4;
  --charts-series-warning-2: #ffb86a;
  --charts-series-warning-3: #ff6900;
  --charts-series-warning-4: #9f2d00;
  --charts-series-success-1: #dcfce7;
  --charts-series-success-2: #7bf1a8;
  --charts-series-success-3: #00c950;
  --charts-series-success-4: #008236;
  --charts-series-danger-1:  #ffc9c9;
  --charts-series-danger-2:  #ff6467;
  --charts-series-danger-3:  #9f0712;
  --charts-series-danger-4:  #9f0712;

  /* ---- Charts dark / chrome (tooltip, axis pointer, primary line) ---- */
  --charts-tooltip-bg:     #1f2126;   /* neutral-12 */
  --charts-tooltip-border: rgba(255, 255, 255, 0.08);
  --charts-axis-pointer:   #4a4d56;
  --charts-line-primary:   #a0befa;   /* navy-80 */

  /* ---- Banners dark ---- */
  --banners-01-container:  #9f2d00;
  --banners-01-on-surface: #fff7ed;
  --banners-02-container:  #00bba7;
  --banners-02-on-surface: #022f2e;
  --banners-03-container:  #a2f4fd;
  --banners-03-on-surface: #053345;
  --banners-04-container:  #024a70;
  --banners-04-on-surface: #74d4ff;
  --banners-05-container:  #432dd7;
  --banners-05-on-surface: #e0e7ff;
  --banners-06-container:  #51a2ff;
  --banners-06-on-surface: #162456;
  --banners-07-container:  #ffedd4;
  --banners-07-on-surface: #441306;

  /* ---- Opacity / neutral (inverted in dark, per Figma) ---- */
  --opacity-neutral-00-opacity-0:   #ffffff00;
  --opacity-neutral-00-opacity-10:  #ffffff1a;
  --opacity-neutral-00-opacity-20:  #ffffff33;
  --opacity-neutral-00-opacity-30:  #ffffff4d;
  --opacity-neutral-00-opacity-40:  #ffffff66;
  --opacity-neutral-00-opacity-50:  #ffffff80;
  --opacity-neutral-00-opacity-60:  #ffffff99;
  --opacity-neutral-00-opacity-70:  #ffffffb2;
  --opacity-neutral-00-opacity-80:  #ffffffcc;
  --opacity-neutral-00-opacity-90:  #ffffffe5;
  --opacity-neutral-100-opacity-0:  #00000000;
  --opacity-neutral-100-opacity-10: #0000001a;
  --opacity-neutral-100-opacity-20: #00000033;
  --opacity-neutral-100-opacity-30: #0000004d;
  --opacity-neutral-100-opacity-40: #00000066;
  --opacity-neutral-100-opacity-50: #00000080;
  --opacity-neutral-100-opacity-60: #00000099;
  --opacity-neutral-100-opacity-70: #000000b2;
  --opacity-neutral-100-opacity-80: #000000cc;
  --opacity-neutral-100-opacity-90: #000000e5;

  /* ---- Liquid glass ---- */
  --liquid-glass-states-fill-enabled:  #0000004d;
  --liquid-glass-states-fill-selected: #ffffff1a;
  --color-tertiary-container-low:      #a50036;   /* rose-800 */
  --color-tertiary-container:          #ffa1ad;   /* rose-300 */
  --color-quaternary-container-low:   #0d542b;   /* green-900 */
  --color-quarternary-container-low:   var(--color-quaternary-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container:       #7bf1a8;   /* green-300 */
  --color-quarternary-container:       var(--color-quaternary-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-tertiary-on-container:       #8b0836;   /* rose-900 */
  --color-quaternary-on-container:    #032e15;   /* green-950 */
  --color-quarternary-on-container:    var(--color-quaternary-on-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --user-1:                            #ffa2a2;   /* red-300 */
  --user-2:                            #ffa1ad;   /* rose-300 */
  --user-3:                            #ffd6a8;   /* orange-200 */
  --user-4:                            #b9f8cf;   /* green-200 */
  --user-5:                            #74d4ff;   /* sky-300 */
  --user-6:                            #8ec5ff;   /* blue-300 */
  --user-7:                            #dab2ff;   /* purple-300 */
  --user-on-user:                      #171717;   /* neutral-900 */

  /* ---- Added from Figma System Tokens (2026-10-06) ---- */
  --color-surface-variant:                                   #000000;   /* neutral-black */
  --color-surface-container-inverse:                         #e5e5e5;   /* neutral-200 */
  --color-background:                                        #171717;   /* neutral-900 */
  --color-primary-on-container-low:                          #bedbff;   /* blue-200 */
  --color-primary-container-inverse:                         #8ec5ff;   /* blue-300 */
  --color-primary-on-container-inverse:                      #162456;   /* blue-950 */
  --color-tertiary-on-container-low:                         #ffccd3;   /* rose-200 */
  --color-tertiary-container-high:                           #ffccd3;   /* rose-200 */
  --color-tertiary-on-container-high:                        #8b0836;   /* rose-900 */
  --color-quaternary-on-container-low:                      #f0fdf4;   /* green-50 */
  --color-quarternary-on-container-low:                      var(--color-quaternary-on-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container-high:                        #b9f8cf;   /* green-200 */
  --color-quarternary-container-high:                        var(--color-quaternary-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-on-container-high:                     #032e15;   /* green-950 */
  --color-quarternary-on-container-high:                     var(--color-quaternary-on-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --interaction-primary-elevated-icon:                       #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-inverse-icon:                 #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-inverse-state-layer-selected: #193cb8;   /* primary-state-surface-dragged */
  --interaction-primary-tonal-icon:                          #bedbff;   /* primary-on-container */
  --interaction-primary-text-icon:                           #8ec5ff;   /* primary-primary */
  --interaction-primary-text-icon-button:                    #d4d4d4;   /* surface-on-surface-var */
  --interaction-primary-text-inverse-icon:                   #162456;   /* primary-on-primary */
  --interaction-primary-outlined-icon:                       #8ec5ff;   /* primary-primary */
  --interaction-primary-outlined-icon-button:                #d4d4d4;   /* surface-on-surface-var */
  --interaction-primary-link:                                #8ec5ff;   /* primary-primary */
  --interaction-primary-link-state-hovered:                  #bedbff;   /* blue-200 */
  --interaction-primary-link-state-pressed:                  #dbeafe;   /* primary-state-filled-pressed */
  --interaction-primary-link-state-focused:                  #dbeafe;   /* primary-state-filled-focused */
  --interaction-primary-link-state-dragged:                  #eff6ff;   /* primary-state-filled-dragged */
  --interaction-error-filled-icon:                           #000000;   /* error-on-error */
  --interaction-error-text-icon:                             #ffc9c9;   /* error-on-error-container */

  /* Elevation — Figma dark mode: level-1 dropshadow y-offsets are 0 */
  --elevation-1: 0 0 3px 0 #00000026, 0 0 2px 0 #0000004d;


  /* ---- Figma 2026-11-04: state colors + container-low interaction sets ---- */
  --color-primary-state-filled-hover:                        #bedbff;   /* blue-200 */
  --color-primary-state-filled-pressed:                      #dbeafe;   /* blue-100 */
  --color-primary-state-filled-focused:                      #dbeafe;   /* blue-100 */
  --color-primary-state-filled-dragged:                      #eff6ff;   /* blue-50 */
  --color-primary-state-tonal-hover:                         #193cb8;   /* blue-800 */
  --color-primary-state-tonal-pressed:                       #1447e6;   /* blue-700 */
  --color-primary-state-tonal-focused:                       #1447e6;   /* blue-700 */
  --color-primary-state-tonal-dragged:                       #1447e6;   /* blue-700 */
  --color-primary-state-surface-hover:                       #1c398e;   /* blue-900 */
  --color-primary-state-surface-pressed:                     #193cb8;   /* blue-800 */
  --color-primary-state-surface-focused:                     #193cb8;   /* blue-800 */
  --color-primary-state-surface-dragged:                     #193cb8;   /* blue-800 */
  --color-secondary-state-filled-hover:                      #c6d2ff;   /* indigo-200 */
  --color-secondary-state-filled-pressed:                    #e0e7ff;   /* indigo-100 */
  --color-secondary-state-filled-drag:                       #eef2ff;   /* indigo-50 */
  --color-secondary-state-tonal-hover:                       #372aac;   /* indigo-800 */
  --color-secondary-state-tonal-pressed:                     #432dd7;   /* indigo-700 */
  --color-secondary-state-tonal-drag:                        #432dd7;   /* indigo-700 */
  --color-tertiary-state-filled-hover:                       #ffccd3;   /* rose-200 */
  --color-tertiary-state-filled-pressed:                     #ffe4e6;   /* rose-100 */
  --color-tertiary-state-filled-drag:                        #fff1f2;   /* rose-50 */
  --color-error-state-filled-hover:                          #ffa2a2;   /* red-300 */
  --color-error-state-filled-pressed:                        #ff6467;   /* red-400 */
  --color-error-state-filled-drag:                           #fb2c36;   /* red-500 */
  --color-error-state-surface-hover:                         #460809;   /* red-950 */
  --color-error-state-surface-pressed:                       #82181a;   /* red-900 */
  --color-error-state-surface-drag:                          #9f0712;   /* red-800 */
  --color-warning-state-filled-hover:                        #7e2a0c;   /* orange-900 */
  --color-warning-state-filled-pressed:                      #441306;   /* orange-950 */
  --color-warning-state-filled-drag:                         #441306;   /* orange-950 */
  --color-warning-state-surface-hover:                       #7e2a0c;   /* orange-900 */
  --color-warning-state-surface-pressed:                     #9f2d00;   /* orange-800 */
  --color-warning-state-surface-drag:                        #ca3500;   /* orange-700 */
  --color-success-state-filled-hover:                        #dcfce7;   /* green-100 */
  --color-success-state-filled-pressed:                      #f0fdf4;   /* green-50 */
  --color-success-state-filled-drag:                         #f0fdf4;   /* green-50 */
  --color-success-state-surface-hover:                       #0d542b;   /* green-900 */
  --color-success-state-surface-pressed:                     #016630;   /* green-800 */
  --color-success-state-surface-drag:                        #016630;   /* green-800 */
  --color-secondary-state-container-low-hover:               #372aac;   /* indigo-800 */
  --color-secondary-state-container-low-pressed:             #312c85;   /* indigo-900 */
  --color-secondary-state-container-low-dragged:             #1e1a4d;   /* indigo-950 */
  --color-secondary-state-container-low-focused:             #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-container:           #432dd7;   /* secondary-container-low-secondary-container-low */
  --interaction-secondary-container-low-state-layer-hovered: #372aac;   /* indigo-800 */
  --interaction-secondary-container-low-state-layer-focused: #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-state-layer-pressed: #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-state-layer-dragged: #1e1a4d;   /* indigo-950 */
  --color-tertiary-state-container-low-hover:                #8b0836;   /* rose-900 */
  --color-tertiary-state-container-low-pressed:              #4d0218;   /* rose-950 */
  --color-tertiary-state-container-low-dragged:              #4d0218;   /* rose-950 */
  --color-tertiary-state-container-low-focused:              #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-container:            #a50036;   /* tertiary-container-low-tertiary-container-low */
  --interaction-tertiary-container-low-state-layer-hovered:  #8b0836;   /* rose-900 */
  --interaction-tertiary-container-low-state-layer-focused:  #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-state-layer-pressed:  #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-state-layer-dragged:  #4d0218;   /* rose-950 */
  --interaction-secondary-container-low-label:               #c6d2ff;   /* secondary-container-low-on-secondary-container-low */
  --interaction-secondary-container-low-icon:                #c6d2ff;   /* secondary-container-low-on-secondary-container-low */
  --interaction-tertiary-container-low-label:                #ffccd3;   /* tertiary-container-low-on-tertiary-container-low */
  --interaction-tertiary-container-low-icon:                 #ffccd3;   /* tertiary-container-low-on-tertiary-container-low */
  --color-primary-state-text-inverse-hover:                  #bedbff;   /* blue-200 */
  --color-primary-state-text-inverse-pressed:                #dbeafe;   /* blue-100 */
  --color-primary-state-text-inverse-dragged:                #eff6ff;   /* blue-50 */
  --color-primary-state-text-inverse-focused:                #dbeafe;   /* blue-100 */
  --interaction-disabled-outline:                            #404040;   /* neutral-700 */
  --color-neutral-state-surface-hover:                       #262626;   /* neutral-800 */
  --color-neutral-state-surface-pressed:                     #404040;   /* neutral-700 */
  --color-neutral-state-surface-dragged:                     #525252;   /* neutral-600 */
  --color-neutral-state-surface-focused:                     #404040;   /* neutral-700 */
  }
}

[data-theme="dark"] {

  /* ---- Surface ---- */
  --color-surface-default:               #171717;   /* neutral-900 */
  --color-surface-on-surface:            #f5f5f5;   /* neutral-100 */
  --color-surface-container-lowest:      #0a0a0a;   /* neutral-950 */
  --color-surface-container-low:         #171717;   /* neutral-900 */
  --color-surface-container:             #262626;   /* neutral-800 */
  --color-surface-container-high:        #404040;   /* neutral-700 */
  --color-surface-container-highest:     #525252;   /* neutral-600 */
  --color-surface-container-highest-alt: var(--color-neutral-outline-container);   /* deprecated: no Figma source since 2026-10-29 */

  /* ---- Surface extended / background / utility ---- */
  --color-surface-dim:                #0a0a0a;   /* neutral-950 */
  --color-surface-bright:             #404040;   /* neutral-700 */
  --color-surface-on-surface-inverse: #262626;   /* neutral-800 */
  --color-surface-inverse-surface:    #e5e5e5;   /* neutral-90 */
  --color-on-background:              #e5e5e5;   /* neutral-90 */
  --color-surface-tint:               #8ec5ff;   /* primary-primary */
  --color-scrim:                      #000000a3; /* black @ 64% */

  /* ---- Gradients (dark values from Figma frame 5856:12695) ---- */
  --gradient-primary-start:   #8ec5ff;   /* blue-300 */
  --gradient-primary-stop:    #51a2ff;   /* blue-400 */
  --gradient-secondary-start: #a3b3ff;   /* indigo-300 */
  --gradient-secondary-stop:  #7c86ff;   /* indigo-400 */
  --gradient-success-start:   #b9f8cf;   /* green-200 */
  --gradient-success-stop:    #7bf1a8;   /* green-300 */
  --gradient-warning-start:   #ffd6a8;   /* orange-200 */
  --gradient-error-start:     #ffa2a2;   /* red-300 */
  --gradient-error-stop:      #ff6467;   /* red-400 */

  /* ---- Interaction / primary / filled ---- */
  --interaction-primary-filled-container:           #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-label:               #162456;   /* primary-on-primary */
  --interaction-primary-filled-icon:                #162456;
  --interaction-primary-filled-state-layer-hovered: #bedbff;   /* blue-200 */
  --interaction-primary-filled-state-layer-pressed: #dbeafe;
  --interaction-primary-filled-state-layer-focused: #dbeafe;
  --interaction-primary-filled-state-layer-dragged: #eff6ff;

  /* ---- Interaction / error / filled ---- */
  --interaction-error-filled-container:           #ffa2a2;   /* error-error */
  --interaction-error-filled-label:               #000000;   /* error-on-error */
  --interaction-error-filled-state-layer-hovered: #ffa2a2;   /* error-state-filled-hover */
  --interaction-error-filled-state-layer-pressed: #ff6467;
  --interaction-error-filled-state-layer-focused: #ff6467;
  --interaction-error-filled-state-layer-dragged: #fb2c36;

  /* ---- Interaction / primary / elevated ---- */
  --interaction-primary-elevated-container:           #171717;   /* surface-surface-container-low */
  --interaction-primary-elevated-label:               #8ec5ff;   /* primary-primary */
  --interaction-primary-elevated-state-layer-hovered: #1c398e;   /* primary-state-surface-hover */
  --interaction-primary-elevated-state-layer-pressed: #193cb8;
  --interaction-primary-elevated-state-layer-focused: #193cb8;
  --interaction-primary-elevated-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / filled-inverse ---- */
  /* Inverse relationship flips: dark mode primary is light, so inverse is dark */
  --interaction-primary-filled-inverse-container:           #171717;   /* surface-surface-container-low */
  --interaction-primary-filled-inverse-label:               #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-inverse-state-layer-hovered: #1c398e;   /* primary-state-surface-hover */
  --interaction-primary-filled-inverse-state-layer-pressed: #193cb8;
  --interaction-primary-filled-inverse-state-layer-focused: #193cb8;
  --interaction-primary-filled-inverse-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / tonal ---- */
  --interaction-primary-tonal-container:           #1c398e;   /* primary-container-primary-container */
  --interaction-primary-tonal-label:               #bedbff;   /* primary-container-on-primary-container */
  --interaction-primary-tonal-state-layer-hovered: #193cb8;   /* primary-state-tonal-hover */
  --interaction-primary-tonal-state-layer-pressed: #1447e6;
  --interaction-primary-tonal-state-layer-focused: #1447e6;
  --interaction-primary-tonal-state-layer-dragged: #1447e6;

  /* ---- Interaction / primary / outlined ---- */
  --interaction-primary-outlined-outline:           #404040;   /* interaction-neutral-outline */
  --interaction-primary-outlined-label:               #8ec5ff;   /* primary-primary */
  --interaction-primary-outlined-state-layer-hovered: #1c398e;   /* primary-state-surface-hover */
  --interaction-primary-outlined-state-layer-pressed: #193cb8;
  --interaction-primary-outlined-state-layer-focused: #193cb8;
  --interaction-primary-outlined-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / text ---- */
  --interaction-primary-text-label:               #8ec5ff;   /* primary-primary */
  --interaction-primary-text-state-layer-hovered: #1c398e;   /* blue-900 */
  --interaction-primary-text-state-layer-pressed: #193cb8;
  --interaction-primary-text-state-layer-focused: #193cb8;
  --interaction-primary-text-state-layer-dragged: #193cb8;

  /* ---- Interaction / primary / text-inverse ---- */
  /* Text-inverse is for dark surfaces; in dark mode those surfaces are standard,
     so the "inverse" role flips to dark text for use on lighter elements */
  --interaction-primary-text-inverse-label:               #162456;   /* primary-on-primary */
  --interaction-primary-text-inverse-state-layer-hovered: #bedbff;   /* primary-state-text-inverse-hover */
  --interaction-primary-text-inverse-state-layer-pressed: #dbeafe;
  --interaction-primary-text-inverse-state-layer-focused: #dbeafe;
  --interaction-primary-text-inverse-state-layer-dragged: #eff6ff;

  /* ---- Interaction / error / text ---- */
  --interaction-error-text-label:               #ffc9c9;   /* error-on-error-container */
  --interaction-error-text-state-layer-hovered: #460809;   /* error-state-surface-hover */
  --interaction-error-text-state-layer-pressed: #82181a;
  --interaction-error-text-state-layer-focused: #82181a;
  --interaction-error-text-state-layer-dragged: #9f0712;

  /* ---- Outage pin body colors dark ---- */
  --color-outage-pin-01: #a0befa;   /* navy-80   · active outage */
  --color-outage-pin-02: #a3faa0;   /* green-80  · crew on-site */
  --color-outage-pin-03: #a0a0fa;   /* cornflower-80 · scheduled */
  --color-outage-pin-04: #c97a2e;   /* orange-50 · flagged */
  --color-outage-pin-05: #faa4a0;   /* red-80    · resolved */
  --color-outage-pin-icon: #1a1a1a; /* near-black · icon fill */
  --color-map-pin-avail-unsel: #1a2e1a; /* dark-green · available unselected */
  --color-map-pin-avail-sel:   #a0befa; /* navy-80    · available selected */
  --color-map-pin-busy:        #c97a2e; /* orange-50  · busy */

  /* ---- Primary color dark overrides ---- */
  --color-primary:                       #8ec5ff;   /* blue-300 */
  --color-primary-container-low:         #162456;   /* blue-950 */
  --color-primary-container:             #1c398e;   /* blue-900 */
  --color-primary-on-container:          #bedbff;   /* blue-200 */
  --color-primary-on-primary-container:  #bedbff;   /* blue-200 */
  --color-primary-container-on:          #bedbff;   /* blue-200 */
  --color-primary-on-primary:            #162456;   /* blue-950 */
  --color-on-primary:                    #162456;   /* blue-950 */
  --color-primary-dark:                  #a0befa;   /* navy-80 */
  --color-primary-inverse:               #162456;   /* blue-950 */

  /* ---- Secondary color dark overrides (fixed tokens are mode-invariant; light only) ---- */
  --color-secondary:                     #a3b3ff;   /* indigo-300 */
  --color-secondary-on-secondary:        #1e1a4d;   /* indigo-950 */
  --color-secondary-inverse:             #372aac;   /* indigo-800 */
  --color-secondary-container-lowest:    #312c85;   /* indigo-900 */
  --color-secondary-on-container-lowest: #c6d2ff;   /* indigo-200 */
  --color-secondary-container-low:       #432dd7;   /* indigo-700 */
  --color-secondary-on-container-low:    #c6d2ff;   /* indigo-200 */
  --color-secondary-container:           #a3b3ff;   /* indigo-300 */
  --color-secondary-on-container:        #312c85;   /* indigo-900 */
  --color-secondary-container-high:      #c6d2ff;   /* indigo-200 */
  --color-secondary-on-container-high:   #1e1a4d;   /* indigo-950 */
  --color-secondary-container-inverse:   #4f39f6;   /* indigo-600 */
  --color-secondary-on-container-inverse: #eef2ff;   /* indigo-50 */

  /* ---- Warning dark overrides ---- */
  --color-warning-warning:     #9f2d00;   /* orange-800 */
  --color-warning-on-warning:  #ffedd4;   /* orange-100 */
  --color-warning-warning-container:      #9f2d00;   /* orange-800 */
  --color-warning-on-warning-container:   #ffedd4;   /* orange-100 */

  /* ---- Success dark overrides ---- */
  --color-success-success:             #b9f8cf;   /* green-200 */
  --color-success-on-success:          #016630;   /* green-800 */
  --color-success-container:           #016630;   /* green-800 */
  --color-success-on-success-container: #dcfce7;  /* green-100 */

  /* ---- Error dark overrides ---- */
  --color-error-error:                 #ffa2a2;   /* red-300 */
  --color-error-on-error:              #000000;   /* black */
  --color-error-container:             #9f0712;   /* red-800 */
  --color-error-on-error-container:    #ffc9c9;   /* red-200 */

  /* ---- Surface secondary text dark ---- */
  --color-surface-on-surface-var: #d4d4d4;   /* neutral-300 */

  /* ---- Interaction aliases dark ---- */
  --interaction-primary-tonal-hovered: #02205c;   /* = tonal-state-layer-hovered */

  /* ---- Interaction / checkbox dark ---- */
  --color-neutral-outline:                          #737373;
  --color-neutral-outline-outline-var:              #404040;   /* neutral-700 */
  --color-neutral-outline-container:                #404040;   /* neutral-700 */
  --interaction-checkbox-outline:                   #666666;

  /* ---- Shared state layer tokens dark ---- */
  --states-on-surface-08:  rgba(229, 229, 229, 0.08);  /* on-surface dark @ 8% */
  --states-on-surface-12:  rgba(229, 229, 229, 0.12);  /* on-surface dark @ 12% */
  --states-primary-08:     rgba(160, 190, 250, 0.08);  /* states/primary dark (#a0befa) @ 8% */
  --states-primary-12:     rgba(160, 190, 250, 0.12);  /* states/primary dark (#a0befa) @ 12% */
  --states-primary-16:     rgba(160, 190, 250, 0.16);  /* states/primary dark (#a0befa) @ 16% */
  --states-on-primary-12:  rgba(2, 32, 92, 0.12);      /* on-primary dark (#02205c) @ 12% */
  --states-error-08:       rgba(250, 164, 160, 0.08);  /* states/error dark (#faa4a0) @ 8% */
  --states-error-12:       rgba(250, 164, 160, 0.12);  /* states/error dark (#faa4a0) @ 12% */
  --states-surface-var-12: rgba(52, 54, 59, 0.12);     /* surface-container-highest dark @ 12% */

  /* ---- Focus dark (Figma System Tokens focus/border, Dark = cornflower/80) ---- */
  --focus-border: #a3b3ff;   /* secondary-container-secondary-container */

  /* ---- Neutral palette dark overrides ---- */
  --color-neutral-40: #aaaaaa;   /* neutral-67 — lifted for contrast on dark surfaces */

  /* ---- Interaction / secondary dark ---- */
  --interaction-secondary-filled-container:            #a3b3ff;
  --interaction-secondary-filled-label:                #312c85;
  --interaction-secondary-filled-icon:                 #312c85;
  --interaction-secondary-filled-state-layer-hovered:  #c6d2ff;
  --interaction-secondary-filled-state-layer-focused:  #e0e7ff;
  --interaction-secondary-filled-state-layer-pressed:  #e0e7ff;
  --interaction-secondary-filled-state-layer-dragged:  #eef2ff;
  --interaction-secondary-tonal-container:             #312c85;
  --interaction-secondary-tonal-label:                 #c6d2ff;
  --interaction-secondary-tonal-icon:                  #c6d2ff;
  --interaction-secondary-tonal-state-layer-hovered:   #372aac;
  --interaction-secondary-tonal-state-layer-focused:   #432dd7;
  --interaction-secondary-tonal-state-layer-selected:  #312c85;
  --interaction-secondary-tonal-state-layer-pressed:   #432dd7;
  --interaction-secondary-tonal-state-layer-dragged:   #432dd7;

  /* ---- Interaction / tertiary dark ---- */
  --interaction-tertiary-filled-container:           #ffa1ad;
  --interaction-tertiary-filled-label:               #8b0836;
  --interaction-tertiary-filled-icon:                #8b0836;
  --interaction-tertiary-filled-state-layer-hovered: #ffccd3;
  --interaction-tertiary-filled-state-layer-focused: #ffe4e6;
  --interaction-tertiary-filled-state-layer-pressed: #ffe4e6;
  --interaction-tertiary-filled-state-layer-dragged: #fff1f2;

  /* ---- Interaction / success dark ---- */
  --interaction-success-filled-container:           #b9f8cf;
  --interaction-success-filled-label:               #016630;
  --interaction-success-filled-icon:                #016630;
  --interaction-success-filled-state-layer-hovered: #dcfce7;
  --interaction-success-filled-state-layer-focused: #f0fdf4;
  --interaction-success-filled-state-layer-pressed: #f0fdf4;
  --interaction-success-filled-state-layer-dragged: #f0fdf4;
  --interaction-success-text-label:                 #b9f8cf;
  --interaction-success-text-icon:                  #b9f8cf;
  --interaction-success-text-state-layer-hovered:   #0d542b;
  --interaction-success-text-state-layer-focused:   #016630;
  --interaction-success-text-state-layer-pressed:   #016630;
  --interaction-success-text-state-layer-dragged:   #016630;

  /* ---- Interaction / warning dark ---- */
  --interaction-warning-filled-container:           #9f2d00;
  --interaction-warning-filled-label:               #ffedd4;
  --interaction-warning-filled-icon:                #ffedd4;
  --interaction-warning-filled-state-layer-hovered: #7e2a0c;
  --interaction-warning-filled-state-layer-focused: #441306;
  --interaction-warning-filled-state-layer-pressed: #441306;
  --interaction-warning-filled-state-layer-dragged: #441306;
  --interaction-warning-text-label:                 #ffedd4;
  --interaction-warning-text-icon:                  #ffedd4;
  --interaction-warning-text-state-layer-hovered:   #7e2a0c;
  --interaction-warning-text-state-layer-focused:   #9f2d00;
  --interaction-warning-text-state-layer-pressed:   #9f2d00;
  --interaction-warning-text-state-layer-dragged:   #ca3500;

  /* ---- Interaction / disabled dark ---- */
  --interaction-disabled-container: #262626;
  --interaction-disabled-label:     #737373;
  --interaction-disabled-icon:      #737373;

  /* ---- Interaction / neutral dark ---- */
  --interaction-neutral-container:             #171717;
  --interaction-neutral-label:                 #f5f5f5;
  --interaction-neutral-icon:                  #f5f5f5;
  --interaction-neutral-state-layer-hovered:  #262626;
  --interaction-neutral-state-layer-focused:  #404040;
  --interaction-neutral-state-layer-pressed:  #404040;
  --interaction-neutral-state-layer-dragged:  #525252;
  --interaction-neutral-state-layer-selected: #262626;
  --interaction-neutral-outline:              #404040;

  /* ---- Charts dark (inverted luminance) ---- */
  --charts-series-1:  #b8e6fe;
  --charts-series-2:  #00bcff;
  --charts-series-3:  #0084d1;
  --charts-series-4:  #024a70;
  --charts-series-5:  #e9d5ff;
  --charts-series-6:  #c27aff;
  --charts-series-7:  #8200db;
  --charts-series-8:  #59168b;
  --charts-series-9:  #f6cfff;
  --charts-series-10: #ed6aff;
  --charts-series-11: #c800de;
  --charts-series-12: #8a0194;
  --charts-series-13: #ffccd3;
  --charts-series-14: #ff637e;
  --charts-series-15: #ec003f;
  --charts-series-16: #a50036;
  --charts-series-other-1:   #d4d4d4;
  --charts-series-other-2:   #737373;
  --charts-series-other-3:   #525252;
  --charts-series-warning-1: #ffedd4;
  --charts-series-warning-2: #ffb86a;
  --charts-series-warning-3: #ff6900;
  --charts-series-warning-4: #9f2d00;
  --charts-series-success-1: #dcfce7;
  --charts-series-success-2: #7bf1a8;
  --charts-series-success-3: #00c950;
  --charts-series-success-4: #008236;
  --charts-series-danger-1:  #ffc9c9;
  --charts-series-danger-2:  #ff6467;
  --charts-series-danger-3:  #9f0712;
  --charts-series-danger-4:  #9f0712;

  /* ---- Charts dark / chrome (tooltip, axis pointer, primary line) ---- */
  --charts-tooltip-bg:     #1f2126;   /* neutral-12 */
  --charts-tooltip-border: rgba(255, 255, 255, 0.08);
  --charts-axis-pointer:   #4a4d56;
  --charts-line-primary:   #a0befa;   /* navy-80 */

  /* ---- Banners dark ---- */
  --banners-01-container:  #9f2d00;
  --banners-01-on-surface: #fff7ed;
  --banners-02-container:  #00bba7;
  --banners-02-on-surface: #022f2e;
  --banners-03-container:  #a2f4fd;
  --banners-03-on-surface: #053345;
  --banners-04-container:  #024a70;
  --banners-04-on-surface: #74d4ff;
  --banners-05-container:  #432dd7;
  --banners-05-on-surface: #e0e7ff;
  --banners-06-container:  #51a2ff;
  --banners-06-on-surface: #162456;
  --banners-07-container:  #ffedd4;
  --banners-07-on-surface: #441306;

  /* ---- Opacity / neutral (inverted in dark, per Figma) ---- */
  --opacity-neutral-00-opacity-0:   #ffffff00;
  --opacity-neutral-00-opacity-10:  #ffffff1a;
  --opacity-neutral-00-opacity-20:  #ffffff33;
  --opacity-neutral-00-opacity-30:  #ffffff4d;
  --opacity-neutral-00-opacity-40:  #ffffff66;
  --opacity-neutral-00-opacity-50:  #ffffff80;
  --opacity-neutral-00-opacity-60:  #ffffff99;
  --opacity-neutral-00-opacity-70:  #ffffffb2;
  --opacity-neutral-00-opacity-80:  #ffffffcc;
  --opacity-neutral-00-opacity-90:  #ffffffe5;
  --opacity-neutral-100-opacity-0:  #00000000;
  --opacity-neutral-100-opacity-10: #0000001a;
  --opacity-neutral-100-opacity-20: #00000033;
  --opacity-neutral-100-opacity-30: #0000004d;
  --opacity-neutral-100-opacity-40: #00000066;
  --opacity-neutral-100-opacity-50: #00000080;
  --opacity-neutral-100-opacity-60: #00000099;
  --opacity-neutral-100-opacity-70: #000000b2;
  --opacity-neutral-100-opacity-80: #000000cc;
  --opacity-neutral-100-opacity-90: #000000e5;

  /* ---- Liquid glass ---- */
  --liquid-glass-states-fill-enabled:  #0000004d;
  --liquid-glass-states-fill-selected: #ffffff1a;
  --color-tertiary-container-low:      #a50036;   /* rose-800 */
  --color-tertiary-container:          #ffa1ad;   /* rose-300 */
  --color-quaternary-container-low:   #0d542b;   /* green-900 */
  --color-quarternary-container-low:   var(--color-quaternary-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container:       #7bf1a8;   /* green-300 */
  --color-quarternary-container:       var(--color-quaternary-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-tertiary-on-container:       #8b0836;   /* rose-900 */
  --color-quaternary-on-container:    #032e15;   /* green-950 */
  --color-quarternary-on-container:    var(--color-quaternary-on-container);   /* deprecated: renamed in Figma 2026-11-04 */
  --user-1:                            #ffa2a2;   /* red-300 */
  --user-2:                            #ffa1ad;   /* rose-300 */
  --user-3:                            #ffd6a8;   /* orange-200 */
  --user-4:                            #b9f8cf;   /* green-200 */
  --user-5:                            #74d4ff;   /* sky-300 */
  --user-6:                            #8ec5ff;   /* blue-300 */
  --user-7:                            #dab2ff;   /* purple-300 */
  --user-on-user:                      #171717;   /* neutral-900 */

  /* ---- Added from Figma System Tokens (2026-10-06) ---- */
  --color-surface-variant:                                   #000000;   /* neutral-black */
  --color-surface-container-inverse:                         #e5e5e5;   /* neutral-200 */
  --color-background:                                        #171717;   /* neutral-900 */
  --color-primary-on-container-low:                          #bedbff;   /* blue-200 */
  --color-primary-container-inverse:                         #8ec5ff;   /* blue-300 */
  --color-primary-on-container-inverse:                      #162456;   /* blue-950 */
  --color-tertiary-on-container-low:                         #ffccd3;   /* rose-200 */
  --color-tertiary-container-high:                           #ffccd3;   /* rose-200 */
  --color-tertiary-on-container-high:                        #8b0836;   /* rose-900 */
  --color-quaternary-on-container-low:                      #f0fdf4;   /* green-50 */
  --color-quarternary-on-container-low:                      var(--color-quaternary-on-container-low);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-container-high:                        #b9f8cf;   /* green-200 */
  --color-quarternary-container-high:                        var(--color-quaternary-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --color-quaternary-on-container-high:                     #032e15;   /* green-950 */
  --color-quarternary-on-container-high:                     var(--color-quaternary-on-container-high);   /* deprecated: renamed in Figma 2026-11-04 */
  --interaction-primary-elevated-icon:                       #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-inverse-icon:                 #8ec5ff;   /* primary-primary */
  --interaction-primary-filled-inverse-state-layer-selected: #193cb8;   /* primary-state-surface-dragged */
  --interaction-primary-tonal-icon:                          #bedbff;   /* primary-on-container */
  --interaction-primary-text-icon:                           #8ec5ff;   /* primary-primary */
  --interaction-primary-text-icon-button:                    #d4d4d4;   /* surface-on-surface-var */
  --interaction-primary-text-inverse-icon:                   #162456;   /* primary-on-primary */
  --interaction-primary-outlined-icon:                       #8ec5ff;   /* primary-primary */
  --interaction-primary-outlined-icon-button:                #d4d4d4;   /* surface-on-surface-var */
  --interaction-primary-link:                                #8ec5ff;   /* primary-primary */
  --interaction-primary-link-state-hovered:                  #bedbff;   /* blue-200 */
  --interaction-primary-link-state-pressed:                  #dbeafe;   /* primary-state-filled-pressed */
  --interaction-primary-link-state-focused:                  #dbeafe;   /* primary-state-filled-focused */
  --interaction-primary-link-state-dragged:                  #eff6ff;   /* primary-state-filled-dragged */
  --interaction-error-filled-icon:                           #000000;   /* error-on-error */
  --interaction-error-text-icon:                             #ffc9c9;   /* error-on-error-container */

  /* Elevation — Figma dark mode: level-1 dropshadow y-offsets are 0 */
  --elevation-1: 0 0 3px 0 #00000026, 0 0 2px 0 #0000004d;

  /* ---- Figma 2026-11-04: state colors + container-low interaction sets ---- */
  --color-primary-state-filled-hover:                        #bedbff;   /* blue-200 */
  --color-primary-state-filled-pressed:                      #dbeafe;   /* blue-100 */
  --color-primary-state-filled-focused:                      #dbeafe;   /* blue-100 */
  --color-primary-state-filled-dragged:                      #eff6ff;   /* blue-50 */
  --color-primary-state-tonal-hover:                         #193cb8;   /* blue-800 */
  --color-primary-state-tonal-pressed:                       #1447e6;   /* blue-700 */
  --color-primary-state-tonal-focused:                       #1447e6;   /* blue-700 */
  --color-primary-state-tonal-dragged:                       #1447e6;   /* blue-700 */
  --color-primary-state-surface-hover:                       #1c398e;   /* blue-900 */
  --color-primary-state-surface-pressed:                     #193cb8;   /* blue-800 */
  --color-primary-state-surface-focused:                     #193cb8;   /* blue-800 */
  --color-primary-state-surface-dragged:                     #193cb8;   /* blue-800 */
  --color-secondary-state-filled-hover:                      #c6d2ff;   /* indigo-200 */
  --color-secondary-state-filled-pressed:                    #e0e7ff;   /* indigo-100 */
  --color-secondary-state-filled-drag:                       #eef2ff;   /* indigo-50 */
  --color-secondary-state-tonal-hover:                       #372aac;   /* indigo-800 */
  --color-secondary-state-tonal-pressed:                     #432dd7;   /* indigo-700 */
  --color-secondary-state-tonal-drag:                        #432dd7;   /* indigo-700 */
  --color-tertiary-state-filled-hover:                       #ffccd3;   /* rose-200 */
  --color-tertiary-state-filled-pressed:                     #ffe4e6;   /* rose-100 */
  --color-tertiary-state-filled-drag:                        #fff1f2;   /* rose-50 */
  --color-error-state-filled-hover:                          #ffa2a2;   /* red-300 */
  --color-error-state-filled-pressed:                        #ff6467;   /* red-400 */
  --color-error-state-filled-drag:                           #fb2c36;   /* red-500 */
  --color-error-state-surface-hover:                         #460809;   /* red-950 */
  --color-error-state-surface-pressed:                       #82181a;   /* red-900 */
  --color-error-state-surface-drag:                          #9f0712;   /* red-800 */
  --color-warning-state-filled-hover:                        #7e2a0c;   /* orange-900 */
  --color-warning-state-filled-pressed:                      #441306;   /* orange-950 */
  --color-warning-state-filled-drag:                         #441306;   /* orange-950 */
  --color-warning-state-surface-hover:                       #7e2a0c;   /* orange-900 */
  --color-warning-state-surface-pressed:                     #9f2d00;   /* orange-800 */
  --color-warning-state-surface-drag:                        #ca3500;   /* orange-700 */
  --color-success-state-filled-hover:                        #dcfce7;   /* green-100 */
  --color-success-state-filled-pressed:                      #f0fdf4;   /* green-50 */
  --color-success-state-filled-drag:                         #f0fdf4;   /* green-50 */
  --color-success-state-surface-hover:                       #0d542b;   /* green-900 */
  --color-success-state-surface-pressed:                     #016630;   /* green-800 */
  --color-success-state-surface-drag:                        #016630;   /* green-800 */
  --color-secondary-state-container-low-hover:               #372aac;   /* indigo-800 */
  --color-secondary-state-container-low-pressed:             #312c85;   /* indigo-900 */
  --color-secondary-state-container-low-dragged:             #1e1a4d;   /* indigo-950 */
  --color-secondary-state-container-low-focused:             #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-container:           #432dd7;   /* secondary-container-low-secondary-container-low */
  --interaction-secondary-container-low-state-layer-hovered: #372aac;   /* indigo-800 */
  --interaction-secondary-container-low-state-layer-focused: #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-state-layer-pressed: #312c85;   /* indigo-900 */
  --interaction-secondary-container-low-state-layer-dragged: #1e1a4d;   /* indigo-950 */
  --color-tertiary-state-container-low-hover:                #8b0836;   /* rose-900 */
  --color-tertiary-state-container-low-pressed:              #4d0218;   /* rose-950 */
  --color-tertiary-state-container-low-dragged:              #4d0218;   /* rose-950 */
  --color-tertiary-state-container-low-focused:              #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-container:            #a50036;   /* tertiary-container-low-tertiary-container-low */
  --interaction-tertiary-container-low-state-layer-hovered:  #8b0836;   /* rose-900 */
  --interaction-tertiary-container-low-state-layer-focused:  #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-state-layer-pressed:  #4d0218;   /* rose-950 */
  --interaction-tertiary-container-low-state-layer-dragged:  #4d0218;   /* rose-950 */
  --interaction-secondary-container-low-label:               #c6d2ff;   /* secondary-container-low-on-secondary-container-low */
  --interaction-secondary-container-low-icon:                #c6d2ff;   /* secondary-container-low-on-secondary-container-low */
  --interaction-tertiary-container-low-label:                #ffccd3;   /* tertiary-container-low-on-tertiary-container-low */
  --interaction-tertiary-container-low-icon:                 #ffccd3;   /* tertiary-container-low-on-tertiary-container-low */
  --color-primary-state-text-inverse-hover:                  #bedbff;   /* blue-200 */
  --color-primary-state-text-inverse-pressed:                #dbeafe;   /* blue-100 */
  --color-primary-state-text-inverse-dragged:                #eff6ff;   /* blue-50 */
  --color-primary-state-text-inverse-focused:                #dbeafe;   /* blue-100 */
  --interaction-disabled-outline:                            #404040;   /* neutral-700 */
  --color-neutral-state-surface-hover:                       #262626;   /* neutral-800 */
  --color-neutral-state-surface-pressed:                     #404040;   /* neutral-700 */
  --color-neutral-state-surface-dragged:                     #525252;   /* neutral-600 */
  --color-neutral-state-surface-focused:                     #404040;   /* neutral-700 */
}