/* =============================================================
   Anvil2 Design System — Tokens (Colors, Type, Spacing, Motion)
   ServiceTitan's product design system.
   Source of truth: DESIGN_SYSTEM.md (hammer-token v3.0.0)

   Token model:
     Tier 1 — Primitives    (--a2-color-*, --a2-size-*, --a2-radius-*)
     Tier 2 — Semantic      (--a2-background-color-*, --a2-foreground-color-*)
     Tier 3 — Component     (--a2-button-primary-background-color, …)

   Wrap your HTML in `<div class="anvil2 theme-core">` so tokens resolve.
   Add `.mode-light` or `.mode-dark` on any ancestor to force a mode.
   ============================================================= */

/* -----------------------------------------------------------
   Fonts — Nunito Sans (base) + Sofia Pro (display).
   ----------------------------------------------------------- */
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans-VariableFont_YTLC_opsz_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/NunitoSans-VariableFont_YTLC_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans-Italic-VariableFont_YTLC_opsz_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/NunitoSans-Italic-VariableFont_YTLC_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* Sofia Pro — Bold only (weight 700, upright). */
@font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaPro-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }


/* =============================================================
   TIER 1 — PRIMITIVES (raw values; mode-agnostic)
   Do NOT consume these directly in component CSS.
   Also exposed at :root so older prototypes that don't wrap in
   `.anvil2.theme-core` still resolve raw color/spacing tokens.
   ============================================================= */
:root,
.anvil2.theme-core {
  /* --- Color: Neutral (0–950) --- */
  --a2-color-neutral-0:   #ffffff;
  --a2-color-neutral-10:  #fcfcfc;
  --a2-color-neutral-20:  #f9f9f9;
  --a2-color-neutral-30:  #f6f6f6;
  --a2-color-neutral-40:  #f1f1f1;
  --a2-color-neutral-50:  #eeeeee;
  --a2-color-neutral-60:  #ededed;
  --a2-color-neutral-70:  #e8e8e8;
  --a2-color-neutral-80:  #e6e6e6;
  --a2-color-neutral-90:  #e5e5e5;
  --a2-color-neutral-100: #dfdfdf;
  --a2-color-neutral-200: #c4c4c4;
  --a2-color-neutral-300: #a8a8a8;
  --a2-color-neutral-400: #8b8b8b;
  --a2-color-neutral-500: #707070;
  --a2-color-neutral-600: #545454;
  --a2-color-neutral-700: #404040;
  --a2-color-neutral-800: #292929;
  --a2-color-neutral-900: #1a1a1a;
  --a2-color-neutral-950: #040404;

  /* --- Color: Blue (brand / primary) --- */
  --a2-color-blue-10:  #fafcff;
  --a2-color-blue-50:  #e6f1ff;
  --a2-color-blue-100: #cce3ff;
  --a2-color-blue-200: #9ecaff;
  --a2-color-blue-300: #70b1ff;
  --a2-color-blue-400: #3d95ff;
  --a2-color-blue-500: #1a82ff;
  --a2-color-blue-600: #0265dc;
  --a2-color-blue-700: #1d4ca3;
  --a2-color-blue-800: #003472;
  --a2-color-blue-900: #002047;
  --a2-color-blue-950: #000b19;

  /* --- Color: Red (danger) --- */
  --a2-color-red-10:  #fffbfa;
  --a2-color-red-50:  #ffe9e5;
  --a2-color-red-100: #ffd4cc;
  --a2-color-red-200: #ffac9e;
  --a2-color-red-300: #ff8670;
  --a2-color-red-400: #ff5b3d;
  --a2-color-red-500: #ff3914;
  --a2-color-red-600: #d62100;
  --a2-color-red-700: #a31900;
  --a2-color-red-800: #731100;
  --a2-color-red-900: #470b00;
  --a2-color-red-950: #0a0200;

  /* --- Color: Green (success) --- */
  --a2-color-green-10:  #f5fefb;
  --a2-color-green-50:  #d3fded;
  --a2-color-green-100: #b8f5dd;
  --a2-color-green-200: #70ebbc;
  --a2-color-green-300: #3be3a2;
  --a2-color-green-400: #0bd085;
  --a2-color-green-500: #0aa86c;
  --a2-color-green-600: #077e50;
  --a2-color-green-700: #05613e;
  --a2-color-green-800: #04482e;
  --a2-color-green-900: #022c1c;
  --a2-color-green-950: #010f0a;

  /* --- Color: Yellow (warning) --- */
  --a2-color-yellow-10:  #fffef8;
  --a2-color-yellow-50:  #fffcf0;
  --a2-color-yellow-100: #fff9e2;
  --a2-color-yellow-200: #fff0b1;
  --a2-color-yellow-300: #ffe278;
  --a2-color-yellow-400: #ffc902;
  --a2-color-yellow-500: #ffbe00;
  --a2-color-yellow-600: #de9500;
  --a2-color-yellow-700: #c98600;
  --a2-color-yellow-800: #704b00;
  --a2-color-yellow-900: #382500;
  --a2-color-yellow-950: #191100;

  /* --- Palette-only families (data-viz, illustration, badges) --- */
  --a2-color-orange-10:  #fff8f1;
  --a2-color-orange-50:  #ffecd6;
  --a2-color-orange-100: #ffddb7;
  --a2-color-orange-200: #ffc07a;
  --a2-color-orange-300: #ffa037;
  --a2-color-orange-400: #e37700;
  --a2-color-orange-500: #c16500;
  --a2-color-orange-600: #964f00;
  --a2-color-orange-700: #693700;
  --a2-color-orange-800: #4d2800;
  --a2-color-orange-900: #2e1900;
  --a2-color-orange-950: #140b00;

  --a2-color-blue-grey-10:  #f7f9fa;
  --a2-color-blue-grey-50:  #e9eef2;
  --a2-color-blue-grey-100: #dce4ea;
  --a2-color-blue-grey-200: #b9c9d5;
  --a2-color-blue-grey-300: #99b1c2;
  --a2-color-blue-grey-400: #7899b0;
  --a2-color-blue-grey-500: #55768e;
  --a2-color-blue-grey-600: #445e71;
  --a2-color-blue-grey-700: #344856;
  --a2-color-blue-grey-800: #24333d;
  --a2-color-blue-grey-900: #192329;
  --a2-color-blue-grey-950: #090d10;

  --a2-color-cyan-10:  #f2fcfe;
  --a2-color-cyan-50:  #daf7fc;
  --a2-color-cyan-100: #c2f2fb;
  --a2-color-cyan-200: #7fe5f6;
  --a2-color-cyan-300: #45d8f2;
  --a2-color-cyan-400: #10c2e2;
  --a2-color-cyan-500: #0da2bd;
  --a2-color-cyan-600: #0a7a8e;
  --a2-color-cyan-700: #075563;
  --a2-color-cyan-800: #05424d;
  --a2-color-cyan-900: #032025;
  --a2-color-cyan-950: #011013;

  --a2-color-purple-10:  #fcfbfe;
  --a2-color-purple-50:  #eeecf9;
  --a2-color-purple-100: #e7e4f6;
  --a2-color-purple-200: #c9c2eb;
  --a2-color-purple-300: #b1a7e2;
  --a2-color-purple-400: #9688d7;
  --a2-color-purple-500: #7766cc;
  --a2-color-purple-600: #5c47c2;
  --a2-color-purple-700: #3f2f8e;
  --a2-color-purple-800: #2e2267;
  --a2-color-purple-900: #191338;
  --a2-color-purple-950: #100c25;

  --a2-color-magenta-10:  #fefbfd;
  --a2-color-magenta-50:  #fae6f3;
  --a2-color-magenta-100: #f8ddef;
  --a2-color-magenta-200: #efb3db;
  --a2-color-magenta-300: #e892cc;
  --a2-color-magenta-400: #eb61be;
  --a2-color-magenta-500: #d741a6;
  --a2-color-magenta-600: #be288d;
  --a2-color-magenta-700: #831b60;
  --a2-color-magenta-800: #591342;
  --a2-color-magenta-900: #26081c;
  --a2-color-magenta-950: #15040f;

  --a2-color-mauves-10:  #fffbfa;
  --a2-color-mauves-50:  #fff7f5;
  --a2-color-mauves-100: #fff4f0;
  --a2-color-mauves-200: #ffe4db;
  --a2-color-mauves-300: #ffd1c2;
  --a2-color-mauves-400: #ffaf94;
  --a2-color-mauves-500: #ffa78a;
  --a2-color-mauves-600: #d88569;
  --a2-color-mauves-700: #d27151;
  --a2-color-mauves-800: #823a21;
  --a2-color-mauves-900: #411d11;
  --a2-color-mauves-950: #200e08;

  --a2-color-lime-10:  #fdfdfc;
  --a2-color-lime-50:  #eaf0db;
  --a2-color-lime-100: #e3eccf;
  --a2-color-lime-200: #c3d595;
  --a2-color-lime-300: #a8c26a;
  --a2-color-lime-400: #8aad39;
  --a2-color-lime-500: #6b9013;
  --a2-color-lime-600: #56750b;
  --a2-color-lime-700: #3a5007;
  --a2-color-lime-800: #2a3a03;
  --a2-color-lime-900: #111801;
  --a2-color-lime-950: #0a0f01;

  /* --- Spacing / Size scale (4px linear) --- */
  --a2-size-quarter: 0.0625rem; /*  1px — border width */
  --a2-size-half:    0.125rem;  /*  2px — strong border, focus offset */
  --a2-size-0:  0;
  --a2-size-1:  0.25rem;        /*  4px */
  --a2-size-2:  0.5rem;         /*  8px */
  --a2-size-3:  0.75rem;        /* 12px */
  --a2-size-4:  1rem;           /* 16px — base spacing, icon-md */
  --a2-size-5:  1.25rem;        /* 20px */
  --a2-size-6:  1.5rem;         /* 24px — card padding, icon-lg */
  --a2-size-7:  1.75rem;
  --a2-size-8:  2rem;           /* 32px — icon-xl, small cmp height */
  --a2-size-9:  2.25rem;
  --a2-size-10: 2.5rem;         /* 40px — medium cmp height (default) */
  --a2-size-11: 2.75rem;
  --a2-size-12: 3rem;           /* 48px — large cmp height */
  --a2-size-13: 3.25rem;
  --a2-size-14: 3.5rem;

  /* --- Border radii (non-uniform steps) --- */
  --a2-radius-0: 0;
  --a2-radius-1: 0.1875rem;     /*  3px — small */
  --a2-radius-2: 0.375rem;      /*  6px — medium (buttons, fields) */
  --a2-radius-3: 0.5625rem;     /*  9px */
  --a2-radius-4: 0.75rem;       /* 12px — large (cards, dialogs) */
  --a2-radius-5: 0.9375rem;
  --a2-radius-6: 1.125rem;
  --a2-radius-7: 1.3125rem;
  --a2-radius-8: 1.5rem;        /* 24px — xlarge */
  --a2-radius-circular: 100%;

  /* --- Font primitives --- */
  --a2-font-family-base:    "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --a2-font-family-display: "Sofia Pro", SofiaPro, "Nunito Sans", system-ui, sans-serif;
  --a2-font-family-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --a2-font-weight-normal:   400;
  --a2-font-weight-semibold: 600;
  --a2-font-weight-bold:     700;

  --a2-font-size-100: 0.625rem;  /* 10px */
  --a2-font-size-200: 0.75rem;   /* 12px */
  --a2-font-size-300: 0.875rem;  /* 14px */
  --a2-font-size-400: 1rem;      /* 16px — default body */
  --a2-font-size-500: 1.25rem;   /* 20px */
  --a2-font-size-600: 1.5rem;    /* 24px */
  --a2-font-size-700: 1.75rem;   /* 28px */
  --a2-font-size-800: 2rem;      /* 32px */
  --a2-font-size-900: 2.25rem;   /* 36px */

  --a2-font-line-height-base:    1.5;
  --a2-font-line-height-display: 1.25;

  /* --- Motion --- */
  --a2-duration-instant: 0ms;
  --a2-duration-fast:    100ms;
  --a2-duration-default: 200ms;
  --a2-duration-slow:    300ms;

  --a2-transition-ease:        cubic-bezier(.4, 0, .2, 1);
  --a2-transition-ease-in:     cubic-bezier(.4, 0, 1, 1);
  --a2-transition-ease-out:    cubic-bezier(0, 0, .4, 1);
  --a2-transition-ease-in-out: cubic-bezier(.4, 0, .6, 1);
}


/* =============================================================
   TIER 2 — SEMANTIC TOKENS (use these in component CSS)
   Color tokens use CSS `light-dark()` so a single declaration
   serves both modes. The mode is selected by `color-scheme` on
   `.anvil2.theme-core` (default `light dark`); `.mode-light` /
   `.mode-dark` force a specific mode.
   ============================================================= */
.anvil2.theme-core {
  color-scheme: light dark;

  /* --- Foreground (text / icon) --- */
  --a2-foreground-color-default:                 light-dark(#040404, #ffffff);
  --a2-foreground-color-default-hover:           light-dark(#040404, #ffffff);
  --a2-foreground-color-default-active:          light-dark(#040404, #ffffff);
  --a2-foreground-color-subdued:                 light-dark(#707070, #a8a8a8);
  --a2-foreground-color-subdued-hover:           light-dark(#707070, #a8a8a8);
  --a2-foreground-color-subdued-active:          light-dark(#545454, #c4c4c4);
  --a2-foreground-color-primary:                 light-dark(#0265dc, #9ecaff);
  --a2-foreground-color-primary-hover:           light-dark(#1d4ca3, #9ecaff);
  --a2-foreground-color-primary-active:          light-dark(#003472, #9ecaff);
  --a2-foreground-color-danger:                  light-dark(#d62100, #ffac9e);
  --a2-foreground-color-danger-hover:            light-dark(#a31900, #ff8670);
  --a2-foreground-color-danger-active:           light-dark(#731100, #ffac9e);
  --a2-foreground-color-inverted:                light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-primary:              light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-primary-hover:        light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-primary-active:       light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-success:              light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-danger:               light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-danger-hover:         light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-danger-active:        light-dark(#ffffff, #1a1a1a);
  --a2-foreground-color-on-danger-subdued:       light-dark(#a31900, #ffffff);
  --a2-foreground-color-on-danger-subdued-hover: light-dark(#731100, #ffffff);
  --a2-foreground-color-on-danger-subdued-active:light-dark(#470b00, #ffffff);
  --a2-foreground-color-on-warning:              #1a1a1a;  /* same both modes */

  /* --- Background --- */
  --a2-background-color-default:                 light-dark(#ffffff, #1a1a1a);
  --a2-background-color-default-hover:           light-dark(#f9f9f9, #292929);
  --a2-background-color-default-active:          light-dark(#f1f1f1, #404040);
  --a2-background-color-secondary:               light-dark(rgba(4,4,4,0.06),  rgba(255,255,255,0.08));
  --a2-background-color-secondary-hover:         light-dark(rgba(4,4,4,0.08),  rgba(255,255,255,0.12));
  --a2-background-color-secondary-active:        light-dark(rgba(4,4,4,0.16),  rgba(255,255,255,0.16));
  --a2-background-color-secondary-strong:        light-dark(rgba(4,4,4,0.15),  rgba(255,255,255,0.55));
  --a2-background-color-secondary-strong-hover:  light-dark(rgba(4,4,4,0.25),  rgba(255,255,255,0.65));
  --a2-background-color-secondary-strong-active: light-dark(rgba(4,4,4,0.3),   rgba(255,255,255,0.75));
  --a2-background-color-strong:                  light-dark(#f9f9f9, #292929);
  --a2-background-color-strong-hover:            light-dark(#eeeeee, #404040);
  --a2-background-color-strong-active:           light-dark(#e8e8e8, #545454);
  --a2-background-color-stronger:                light-dark(#eeeeee, #404040);
  --a2-background-color-stronger-hover:          light-dark(#e5e5e5, #545454);
  --a2-background-color-stronger-active:         light-dark(#dfdfdf, #707070);
  --a2-background-color-strongest:               light-dark(#c4c4c4, #707070);
  --a2-background-color-strongest-hover:         light-dark(#a8a8a8, #8b8b8b);
  --a2-background-color-strongest-active:        light-dark(#8b8b8b, #a8a8a8);

  --a2-background-color-primary:                 #0265dc;  /* same both modes */
  --a2-background-color-primary-hover:           light-dark(#1d4ca3, #9ecaff);
  --a2-background-color-primary-active:          light-dark(#003472, #cce3ff);
  --a2-background-color-primary-subdued:         light-dark(#e6f1ff, rgba(70,177,255,0.2));
  --a2-background-color-primary-subdued-hover:   light-dark(#cce3ff, rgba(70,177,255,0.3));
  --a2-background-color-primary-subdued-active:  light-dark(#9ecaff, rgba(70,177,255,0.4));
  --a2-background-color-primary-faint:           light-dark(#fafcff, #000b19);
  --a2-background-color-primary-faint-hover:     light-dark(#e6f1ff, #003472);
  --a2-background-color-primary-faint-active:    light-dark(#cce3ff, #1d4ca3);

  --a2-background-color-success:                 #077e50;  /* same both modes */
  --a2-background-color-success-hover:           light-dark(#05613e, #3be3a2);
  --a2-background-color-success-active:          light-dark(#04482e, #d3fded);
  --a2-background-color-success-subdued:         light-dark(#d3fded, rgba(59,227,162,0.2));
  --a2-background-color-success-faint:           light-dark(#f5fefb, #010f0a);

  --a2-background-color-danger:                  #d62100;  /* same both modes */
  --a2-background-color-danger-hover:            light-dark(#a31900, #ff8670);
  --a2-background-color-danger-active:           light-dark(#731100, #ffac9e);
  --a2-background-color-danger-subdued:          light-dark(#ffe9e5, rgba(255,134,112,0.2));
  --a2-background-color-danger-faint:            light-dark(#fffbfa, #0a0200);

  --a2-background-color-warning:                 #ffbe00;  /* same both modes */
  --a2-background-color-warning-hover:           light-dark(#de9500, #fff9e2);
  --a2-background-color-warning-subdued:         light-dark(#fff9e2, rgba(255,201,2,0.2));
  --a2-background-color-warning-faint:           light-dark(#fffef8, #191100);

  --a2-background-color-disabled:                light-dark(#545454, #707070);
  --a2-background-color-inverted:                light-dark(#292929, #f9f9f9);
  --a2-background-color-inverted-strong:         light-dark(#1a1a1a, #ffffff);

  --a2-background-color-transparent-default:         transparent;
  --a2-background-color-transparent-default-hover:   light-dark(rgba(139,139,139,0.08), rgba(255,255,255,0.08));
  --a2-background-color-transparent-default-active:  light-dark(rgba(139,139,139,0.16), rgba(255,255,255,0.16));
  --a2-background-color-transparent-primary:         transparent;
  --a2-background-color-transparent-primary-hover:   light-dark(rgba(26,130,255,0.1),   rgba(112,177,255,0.1));
  --a2-background-color-transparent-primary-active:  light-dark(rgba(26,130,255,0.3),   rgba(112,177,255,0.25));
  --a2-background-color-transparent-danger:          transparent;
  --a2-background-color-transparent-danger-hover:    light-dark(rgba(255,57,20,0.1),    rgba(255,134,112,0.1));
  --a2-background-color-transparent-danger-active:   light-dark(rgba(255,57,20,0.3),    rgba(255,134,112,0.25));

  /* --- Border --- */
  --a2-border-color-default: light-dark(#8b8b8b, #545454);
  --a2-border-color-subdued: light-dark(#e6e6e6, #404040);
  --a2-border-color-strong:  light-dark(#404040, #e6e6e6);
  --a2-border-color-primary: light-dark(#0265dc, #9ecaff);
  --a2-border-color-success: light-dark(#077e50, #70ebbc);
  --a2-border-color-warning: light-dark(#c98600, #fff0b1);
  --a2-border-color-danger:  light-dark(#d62100, #ffac9e);

  /* --- Border radius (mode-agnostic) --- */
  --a2-border-radius-none:    var(--a2-radius-0);
  --a2-border-radius-small:   var(--a2-radius-1);
  --a2-border-radius-medium:  var(--a2-radius-2);
  --a2-border-radius-large:   var(--a2-radius-4);
  --a2-border-radius-xlarge:  var(--a2-radius-8);
  --a2-border-radius-circular: 100%;

  /* --- Border widths (mode-agnostic) --- */
  --a2-border-width-none:    0;
  --a2-border-width-default: 0.0625rem;   /* 1px */
  --a2-border-width-strong:  0.125rem;    /* 2px */

  /* --- Status --- */
  --a2-status-color-info:    light-dark(#0265dc, #70b1ff);
  --a2-status-color-success: light-dark(#077e50, #0bd085);
  --a2-status-color-warning: light-dark(#ffbe00, #ffe278);
  --a2-status-color-danger:  light-dark(#d62100, #ff5b3d);

  /* --- Focus ring --- */
  --a2-focus-ring-color-default: light-dark(#0265dc, #70b1ff);
  --a2-focus-ring-color-danger:  light-dark(#d62100, #ff5b3d);
  --a2-focus-ring-width: 0.25rem;
  --a2-focus-ring-style: solid;

  /* --- Shadow --- */
  --a2-shadow-color-default: light-dark(rgba(26,26,26,0.08), rgba(255,255,255,0.08));
  --a2-shadow-color-strong:  light-dark(rgba(4,4,4,0.24),    rgba(255,255,255,0.24));
  --a2-shadow-size-flat:    0 0 0;
  --a2-shadow-size-float:   0 0.125rem 0.5rem;
  --a2-shadow-size-overlay: 0 0.5rem  1.5rem;

  /* --- Typography (semantic, non-color) --- */
  --a2-typography-paragraph-font-weight: 400;
  --a2-typography-paragraph-font-family: var(--a2-font-family-base);
  --a2-typography-paragraph-size-xsmall: 0.75rem;   /* 12 */
  --a2-typography-paragraph-size-small:  0.875rem;  /* 14 */
  --a2-typography-paragraph-size-default: 1rem;     /* 16 ← default body */
  --a2-typography-paragraph-size-large:  1.25rem;   /* 20 */
  --a2-typography-paragraph-size-xlarge: 1.5rem;    /* 24 */

  --a2-typography-heading-font-weight: 700;
  --a2-typography-heading-font-family: var(--a2-font-family-display);
  --a2-typography-heading-size-xsmall:  0.875rem;   /* 14 */
  --a2-typography-heading-size-small:   1rem;       /* 16 */
  --a2-typography-heading-size-default: 1.25rem;    /* 20 */
  --a2-typography-heading-size-large:   1.5rem;     /* 24 */
  --a2-typography-heading-size-xlarge:  2rem;       /* 32 */

  --a2-typography-label-font-weight: 600;
  --a2-typography-label-font-family: var(--a2-font-family-base);
  --a2-typography-label-size-xsmall:  0.625rem;     /* 10 */
  --a2-typography-label-size-small:   0.75rem;      /* 12 */
  --a2-typography-label-size-default: 0.875rem;     /* 14 */
  --a2-typography-label-size-large:   1rem;         /* 16 */
  --a2-typography-label-size-xlarge:  1.25rem;      /* 20 */
}

/* Mode overrides — use on any ancestor to force a mode. */
.anvil2.theme-core.mode-light, .mode-light .anvil2.theme-core { color-scheme: light; }
.anvil2.theme-core.mode-dark,  .mode-dark  .anvil2.theme-core { color-scheme: dark;  }

/* Theme bootstrap — applied when the wrapper is present so the
   page picks up the correct base color, font, and surface. */
.anvil2.theme-core {
  color: var(--a2-foreground-color-default);
  background: var(--a2-background-color-default);
  font-family: var(--a2-font-family-base);
  font-size: var(--a2-typography-paragraph-size-default);
  line-height: var(--a2-font-line-height-base);
  -webkit-font-smoothing: antialiased;
}


/* =============================================================
   :root semantic shims — light-mode resolved values for code
   that doesn't (yet) wrap content in `.anvil2.theme-core`.
   This is the legacy path; new code should use the wrapper.
   ============================================================= */
:root {
  --a2-foreground-color-default:           #040404;
  --a2-foreground-color-default-hover:     #040404;
  --a2-foreground-color-default-active:    #040404;
  --a2-foreground-color-subdued:           #707070;
  --a2-foreground-color-subdued-hover:     #707070;
  --a2-foreground-color-subdued-active:    #545454;
  --a2-foreground-color-primary:           #0265dc;
  --a2-foreground-color-primary-hover:     #1d4ca3;
  --a2-foreground-color-primary-active:    #003472;
  --a2-foreground-color-danger:            #d62100;
  --a2-foreground-color-danger-hover:      #a31900;
  --a2-foreground-color-danger-active:     #731100;
  --a2-foreground-color-inverted:          #ffffff;
  --a2-foreground-color-on-primary:        #ffffff;
  --a2-foreground-color-on-success:        #ffffff;
  --a2-foreground-color-on-danger:         #ffffff;
  --a2-foreground-color-on-warning:        #1a1a1a;

  --a2-background-color-default:           #ffffff;
  --a2-background-color-default-hover:     #f9f9f9;
  --a2-background-color-default-active:    #f1f1f1;
  --a2-background-color-secondary:         rgba(4,4,4,0.06);
  --a2-background-color-secondary-hover:   rgba(4,4,4,0.08);
  --a2-background-color-secondary-active:  rgba(4,4,4,0.16);
  --a2-background-color-strong:            #f9f9f9;
  --a2-background-color-stronger:          #eeeeee;
  --a2-background-color-strongest:         #c4c4c4;
  --a2-background-color-primary:           #0265dc;
  --a2-background-color-primary-hover:     #1d4ca3;
  --a2-background-color-primary-active:    #003472;
  --a2-background-color-primary-subdued:   #e6f1ff;
  --a2-background-color-primary-faint:     #fafcff;
  --a2-background-color-success:           #077e50;
  --a2-background-color-success-faint:     #f5fefb;
  --a2-background-color-success-subdued:   #d3fded;
  --a2-background-color-danger:            #d62100;
  --a2-background-color-danger-faint:      #fffbfa;
  --a2-background-color-danger-subdued:    #ffe9e5;
  --a2-background-color-warning:           #ffbe00;
  --a2-background-color-warning-faint:     #fffef8;
  --a2-background-color-warning-subdued:   #fff9e2;
  --a2-background-color-disabled:          #545454;
  --a2-background-color-inverted:          #292929;
  --a2-background-color-surface-sunken:    #f7f9fa;

  --a2-border-color-default: #8b8b8b;
  --a2-border-color-subdued: #e6e6e6;
  --a2-border-color-strong:  #404040;
  --a2-border-color-primary: #0265dc;
  --a2-border-color-success: #077e50;
  --a2-border-color-warning: #c98600;
  --a2-border-color-danger:  #d62100;

  --a2-status-color-info:    #0265dc;
  --a2-status-color-success: #077e50;
  --a2-status-color-warning: #ffbe00;
  --a2-status-color-danger:  #d62100;

  --a2-border-radius-none:    var(--a2-radius-0);
  --a2-border-radius-small:   var(--a2-radius-1);
  --a2-border-radius-medium:  var(--a2-radius-2);
  --a2-border-radius-large:   var(--a2-radius-4);
  --a2-border-radius-xlarge:  var(--a2-radius-8);
  --a2-border-radius-circular: 100%;

  --a2-border-width-none:    0;
  --a2-border-width-default: 0.0625rem;
  --a2-border-width-strong:  0.125rem;

  --a2-focus-ring-color-default: #0265dc;
  --a2-focus-ring-color-danger:  #d62100;
  --a2-focus-ring-color: #0265dc;          /* legacy alias */
  --a2-focus-ring-width: 0.25rem;
  --a2-focus-ring-offset: 2px;             /* legacy alias */
  --a2-focus-ring-style: solid;

  --a2-shadow-color-default: rgba(26,26,26,0.08);
  --a2-shadow-color-strong:  rgba(4,4,4,0.24);
  --a2-shadow-size-flat:    0 0 0;
  --a2-shadow-size-float:   0 0.125rem 0.5rem;
  --a2-shadow-size-overlay: 0 0.5rem  1.5rem;

  /* --- Legacy shadow aliases (5-step elevation kept for downstream prototypes) --- */
  --a2-shadow-xsmall: 0 1px 2px rgba(26,26,26,0.08);
  --a2-shadow-small:  0 2px 4px rgba(26,26,26,0.08), 0 1px 2px rgba(4,4,4,0.10);
  --a2-shadow-medium: 0 4px 8px rgba(4,4,4,0.12),    0 2px 4px rgba(4,4,4,0.08);
  --a2-shadow-large:  0 8px 20px rgba(4,4,4,0.18),   0 2px 6px rgba(4,4,4,0.10);
  --a2-shadow-xlarge: 0 16px 40px rgba(4,4,4,0.24),  0 4px 12px rgba(4,4,4,0.12);

  /* --- Legacy semantic aliases (older preview/ui_kits files) --- */
  --a2-foreground-color-muted:    #8b8b8b;
  --a2-foreground-color-disabled: #a8a8a8;
  --a2-foreground-color-inverse:  #ffffff;
  --a2-foreground-color-warning:  #c16500;

  --a2-typography-paragraph-font-weight:  400;
  --a2-typography-paragraph-font-family:  var(--a2-font-family-base);
  --a2-typography-paragraph-size-xsmall:  0.75rem;
  --a2-typography-paragraph-size-small:   0.875rem;
  --a2-typography-paragraph-size-default: 1rem;
  --a2-typography-paragraph-size-large:   1.25rem;
  --a2-typography-paragraph-size-xlarge:  1.5rem;
  --a2-typography-heading-font-weight:    700;
  --a2-typography-heading-font-family:    var(--a2-font-family-display);
  --a2-typography-heading-size-xsmall:    0.875rem;
  --a2-typography-heading-size-small:     1rem;
  --a2-typography-heading-size-default:   1.25rem;
  --a2-typography-heading-size-large:     1.5rem;
  --a2-typography-heading-size-xlarge:    2rem;
  --a2-typography-label-font-weight:      600;
  --a2-typography-label-font-family:      var(--a2-font-family-base);
  --a2-typography-label-size-xsmall:      0.625rem;
  --a2-typography-label-size-small:       0.75rem;
  --a2-typography-label-size-default:     0.875rem;
  --a2-typography-label-size-large:       1rem;
  --a2-typography-label-size-xlarge:      1.25rem;
}


/* =============================================================
   Base element styling — applies whenever this CSS is imported,
   even outside the `.anvil2.theme-core` wrapper.
   ============================================================= */
body {
  font-family: var(--a2-font-family-base);
  font-size: var(--a2-typography-paragraph-size-default);
  line-height: var(--a2-font-line-height-base);
  color: var(--a2-foreground-color-default);
  background: var(--a2-background-color-default);
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------
   Utility type classes — Anvil semantic typography.
   Headings default to Sofia Pro display family.
   ----------------------------------------------------------- */
.a2-text-display-xlarge,
h1.a2-display {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: 900;
  font-size: 2.5rem;        /* 40px — Sofia Pro Black 40 */
  line-height: var(--a2-font-line-height-display);
  letter-spacing: -0.01em;
}
.a2-text-display-large {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: var(--a2-typography-heading-font-weight);
  font-size: var(--a2-typography-heading-size-xlarge);
  line-height: var(--a2-font-line-height-display);
  letter-spacing: -0.005em;
}
.a2-text-title-large,
h1 {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: var(--a2-typography-heading-font-weight);
  font-size: var(--a2-typography-heading-size-xlarge);   /* 32 */
  line-height: 1.25;
}
.a2-text-title-medium,
h2 {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: var(--a2-typography-heading-font-weight);
  font-size: var(--a2-typography-heading-size-large);    /* 24 */
  line-height: 1.3;
}
.a2-text-title-small,
h3 {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: var(--a2-typography-heading-font-weight);
  font-size: var(--a2-typography-heading-size-default);  /* 20 */
  line-height: 1.35;
}
.a2-text-heading,
h4 {
  font-family: var(--a2-typography-heading-font-family);
  font-weight: var(--a2-typography-heading-font-weight);
  font-size: var(--a2-typography-heading-size-small);    /* 16 */
  line-height: 1.5;
}
.a2-text-subheading,
h5, h6 {
  font-family: var(--a2-typography-label-font-family);
  font-weight: var(--a2-typography-label-font-weight);
  font-size: var(--a2-typography-label-size-default);    /* 14 */
  line-height: 1.5;
}

.a2-text-body-large {
  font-family: var(--a2-typography-paragraph-font-family);
  font-size: var(--a2-typography-paragraph-size-default); /* 16 */
  font-weight: var(--a2-typography-paragraph-font-weight);
  line-height: 1.5;
}
.a2-text-body,
p {
  font-family: var(--a2-typography-paragraph-font-family);
  font-size: var(--a2-typography-paragraph-size-small);   /* 14 */
  font-weight: var(--a2-typography-paragraph-font-weight);
  line-height: 1.5;
}
.a2-text-label {
  font-family: var(--a2-typography-label-font-family);
  font-size: var(--a2-typography-label-size-default);
  font-weight: var(--a2-typography-label-font-weight);
  line-height: 1.5;
}
.a2-text-caption {
  font-family: var(--a2-typography-paragraph-font-family);
  font-size: var(--a2-typography-paragraph-size-xsmall);  /* 12 */
  font-weight: var(--a2-typography-paragraph-font-weight);
  line-height: 1.5;
  color: var(--a2-foreground-color-subdued);
}
.a2-text-overline {
  font-family: var(--a2-typography-label-font-family);
  font-size: var(--a2-typography-label-size-xsmall);      /* 10 */
  font-weight: var(--a2-font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a2-foreground-color-subdued);
}

code, .a2-text-mono {
  font-family: var(--a2-font-family-mono);
  font-size: 0.9em;
  background: var(--a2-background-color-secondary);
  padding: 0.1em 0.3em;
  border-radius: var(--a2-border-radius-small);
}

/* Links */
a, .a2-link {
  color: var(--a2-foreground-color-primary);
  text-decoration: none;
  font-weight: var(--a2-font-weight-semibold);
}
a:hover, .a2-link:hover {
  text-decoration: underline;
  color: var(--a2-foreground-color-primary-hover);
}

/* Visually-hidden helper for accessible labels. */
.anv-sr-only,
.a2-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}