/* Checkout Bench tokens, matched to the concepts brand:
   navy #0033A0 on gray #E6E6E6, ink #0A1F5C, orange #FF5A1F only for fail/warn,
   square corners, Inter + JetBrains Mono.
   Theme: html[data-theme="light"|"dark"] is set before first paint. With JS off,
   the prefers-color-scheme block below applies dark values. */

:root{
  --font-sans:Inter, -apple-system, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0; --radius-2xl:0; --radius-3xl:0; --radius-card:0; --radius-full:0;
  --container:1328px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out-quart:cubic-bezier(.25,1,.5,1); --dur:.15s;
  --grain:none;
}

/* ---------- LIGHT ---------- */
:root, [data-theme="light"] {
  --bg:#E6E6E6; --bg2:#EFEFEF; --ink:#0A1F5C; --dim:#4A5578; --mute:#7A8299;
  --line:#CFCFD4; --line2:#BDBDC4; --accent:#0033A0; --fail:#FF5A1F; --warn:#FF5A1F;
  --cb-ink:var(--ink); --cb-dim:var(--dim); --cb-line:var(--line); --cb-paper:var(--bg);
  --cb-accent:var(--accent); --cb-fail:var(--fail); --cb-warn:var(--warn);

  --slate-1:#E6E6E6; --slate-2:#EFEFEF; --slate-3:#E8E8EA; --slate-4:#E0E0E3; --slate-5:#D6D6DB;
  --slate-6:#CFCFD4; --slate-7:#BDBDC4; --slate-8:#A8A8B0; --slate-9:#7A8299; --slate-10:#6B7390;
  --slate-11:#4A5578; --slate-12:#0A1F5C;

  --blue-1:#F4F6FB; --blue-2:#E8EDF7; --blue-3:#D6DFF0; --blue-4:#C2CEE8; --blue-5:#A9BBE6;
  --blue-6:#8FA6D6; --blue-7:#5B86EE; --blue-8:#3A62BD; --blue-9:#0033A0; --blue-10:#002B8A;
  --blue-11:#0033A0; --blue-12:#0A1F5C;

  /* Success reads as navy so the only marker color is orange. */
  --green-1:#F4F6FB; --green-2:#E8EDF7; --green-3:#D6DFF0; --green-4:#C2CEE8; --green-5:#A9BBE6;
  --green-6:#8FA6D6; --green-7:#5B86EE; --green-8:#3A62BD; --green-9:#0033A0; --green-10:#002B8A;
  --green-11:#0033A0; --green-12:#0A1F5C;

  --amber-1:#FFF6F1; --amber-2:#FFEDE4; --amber-3:#FFE4D6; --amber-4:#FFD1B8; --amber-5:#FFB08F;
  --amber-6:#FF9466; --amber-7:#FF7A45; --amber-8:#FF7038; --amber-9:#FF5A1F; --amber-10:#E2531D;
  --amber-11:#C43D10; --amber-12:#582D1D;

  --red-1:#FFF6F1; --red-2:#FFEDE4; --red-3:#FFE4D6; --red-4:#FFD1B8; --red-5:#FFB08F;
  --red-6:#FF9466; --red-7:#FF7A45; --red-8:#E2531D; --red-9:#FF5A1F; --red-10:#E2531D;
  --red-11:#C43D10; --red-12:#582D1D;

  --orange-1:#FFF6F1; --orange-2:#FFEDE4; --orange-3:#FFE4D6; --orange-4:#FFD1B8; --orange-5:#FFB08F;
  --orange-6:#FF9466; --orange-7:#FF7A45; --orange-8:#FF7038; --orange-9:#FF5A1F; --orange-10:#E2531D;
  --orange-11:#C43D10; --orange-12:#582D1D;

  --purple-1:#F4F6FB; --purple-2:#E8EDF7; --purple-3:#D6DFF0; --purple-4:#C2CEE8; --purple-5:#A9BBE6;
  --purple-6:#8FA6D6; --purple-7:#5B86EE; --purple-8:#3A62BD; --purple-9:#0033A0; --purple-10:#002B8A;
  --purple-11:#0033A0; --purple-12:#0A1F5C;

  --pink-1:#FFF6F1; --pink-2:#FFEDE4; --pink-3:#FFE4D6; --pink-4:#FFD1B8; --pink-5:#FFB08F;
  --pink-6:#FF9466; --pink-7:#FF7A45; --pink-8:#FF7038; --pink-9:#FF5A1F; --pink-10:#E2531D;
  --pink-11:#C43D10; --pink-12:#582D1D;

  --white:#fff; --black:#000;
  --bg-default:#E6E6E6; --bg-screen:#E6E6E6; --bg-subtle:#EFEFEF; --bg-element:#E8E8EA;
  --bg-hover:#E0E0E3; --bg-selected:#D6D6DB; --bg-overlay:#EFEFEF;
  --bg-success:var(--green-3); --bg-warning:var(--amber-3); --bg-danger:var(--red-3); --bg-info:var(--blue-3); --bg-preview:var(--blue-3);
  --text-default:var(--ink); --text-secondary:var(--dim); --text-tertiary:var(--mute); --text-quaternary:#6B7390;
  --text-link:var(--accent); --text-success:var(--green-11); --text-warning:var(--amber-11); --text-danger:var(--red-11); --text-info:var(--blue-11);
  --icon-default:var(--dim); --icon-secondary:var(--mute); --icon-tertiary:#6B7390; --icon-quaternary:var(--line2);
  --icon-success:var(--green-10); --icon-info:var(--blue-10);
  --border-default:var(--line); --border-secondary:var(--line2); --border-success:var(--green-7); --border-info:var(--blue-7);

  --btn-primary-bg:#0033A0; --btn-primary-text:#fff; --btn-primary-hover:#002B8A;
  --btn-secondary-bg:#EFEFEF; --btn-secondary-text:var(--ink); --btn-secondary-hover:#E0E0E3;
  --btn-tertiary-border:var(--line2); --btn-tertiary-text:var(--ink); --btn-tertiary-hover:#EFEFEF;
  --btn-quaternary-text:var(--ink); --btn-quaternary-hover:#EFEFEF;
  --cta-bg:#0033A0; --cta-text:#fff;

  --shadow-xs:0 1px 3px #00000006, 0 1px 2px #0000000d;
  --shadow-sm:0 3px 6px #00000014, 0 2px 4px #00000012;
  --shadow-md:0 10px 20px #0000001a, 0 3px 6px #0000000d;
  --shadow-lg:0 15px 25px #0000001f, 0 5px 10px #0000000d;
  --shadow-xl:0 20px 40px #00000026;

  --overlay:rgb(10 31 92 / .4);
  --corner-bg:rgb(239 239 239 / .7);
  --burst-t0:.08; --burst-t1:.13; --burst-t2:.19; --burst-dots:.65;
  --burst-tile-stroke:color-mix(in srgb, var(--border-default) 20%, transparent); --burst-mark:var(--ink);
  --soft-pill-bg:var(--slate-5);
  --mock-bg:#EFEFEF; --mock-line:var(--slate-4); --mock-line-strong:var(--slate-7);
  --stat-tile:#0033A0; --stat-tile-border:transparent;
  --cta-fade-to:var(--bg-default);
  --tile-shadow:0 5px 10px rgba(0,51,160,.06),0 15px 25px rgba(0,51,160,.08);
  --pill-hover-shadow:0 5px 14px -3px rgba(0,51,160,.18); --pill-tag-bg:var(--bg-default); --pill-tag-hover:var(--bg-default);
  --theme-btn-hover:var(--bg-element);
  --app-icon-ring:transparent;

  --fn-1:#0A1F5C; --fn-2:#0033A0; --fn-3:#2452B3; --fn-4:#3A62BD; --fn-5:#5B7FD0; --fn-6:#8FA6D6; --fn-7:#B8C6E6;
  --cp-quoted:#0033A0; --cp-fair:#5B86EE; --cp-assistant:#FF5A1F; --cp-backend:#C9643A; --cp-operator:#7A8299;
  --bp-1:#0033A0; --bp-2:#2452B3; --bp-3:#5B86EE; --bp-4:#8FA6D6;
  --lq-1:#0A1F5C; --lq-2:#0033A0; --lq-3:#2452B3; --lq-4:#5B86EE; --lq-5:#8FA6D6; --lq-6:#FFB08F;

  color-scheme:light;
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg:#1D1E20; --bg2:#242528; --ink:#F2F2F0; --dim:#B9BBC0; --mute:#8F9298;
  --line:#323438; --line2:#45474C; --accent:#9DB6F2; --fail:#FF5A1F; --warn:#FF7A45;
  --d-card:#2A2B2E; --d-deep:#161719; --d-navy:#0033A0; --d-navy-edge:#4A6FD0; --d-plan:#DCDBD6;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cb-ink:#FFFFFF; --cb-dim:#8FA6D6; --cb-line:#323438; --cb-paper:#1D1E20;
  --cb-accent:var(--accent); --cb-fail:var(--fail); --cb-warn:var(--warn);

  --slate-1:#1F2022; --slate-2:#242528; --slate-3:#2A2B2E; --slate-4:#2F3034; --slate-5:#36373B;
  --slate-6:#3E4044; --slate-7:#4A4C51; --slate-8:#5E6066; --slate-9:#7D8087; --slate-10:#91949A;
  --slate-11:#B9BBC0; --slate-12:#F2F2F0;

  --blue-1:#222429; --blue-2:#25282F; --blue-3:#2A2E38; --blue-4:#303644; --blue-5:#373F52;
  --blue-6:#404A63; --blue-7:#4D5A7C; --blue-8:#5F73A6; --blue-9:#5B86EE; --blue-10:#7A9DF2;
  --blue-11:#9DB6F2; --blue-12:#E3EBFF;

  --green-1:#222429; --green-2:#25282F; --green-3:#2A2E38; --green-4:#303644; --green-5:#373F52;
  --green-6:#404A63; --green-7:#4D5A7C; --green-8:#5F73A6; --green-9:#5B86EE; --green-10:#7A9DF2;
  --green-11:#9DB6F2; --green-12:#E3EBFF;

  --amber-1:#272220; --amber-2:#2C2420; --amber-3:#33261F; --amber-4:#3F2B1F; --amber-5:#57331F;
  --amber-6:#7A3E22; --amber-7:#B04A1F; --amber-8:#E2531D; --amber-9:#FF5A1F; --amber-10:#FF7038;
  --amber-11:#FF9466; --amber-12:#FFE1D3;

  --red-1:#272220; --red-2:#2C2420; --red-3:#33261F; --red-4:#3F2B1F; --red-5:#57331F;
  --red-6:#7A3E22; --red-7:#B04A1F; --red-8:#E2531D; --red-9:#FF5A1F; --red-10:#FF7038;
  --red-11:#FF9466; --red-12:#FFE1D3;

  --orange-1:#272220; --orange-2:#2C2420; --orange-3:#33261F; --orange-4:#3F2B1F; --orange-5:#57331F;
  --orange-6:#7A3E22; --orange-7:#B04A1F; --orange-8:#E2531D; --orange-9:#FF5A1F; --orange-10:#FF7038;
  --orange-11:#FF9466; --orange-12:#FFE1D3;

  --purple-1:#1F2022; --purple-2:#242528; --purple-3:#2A2B2E; --purple-4:#2F3034; --purple-5:#36373B;
  --purple-6:#3E4044; --purple-7:#4A4C51; --purple-8:#5E6066; --purple-9:#8F9298; --purple-10:#A3A6AC;
  --purple-11:#B9BBC0; --purple-12:#F2F2F0;

  --pink-1:#1F2022; --pink-2:#242528; --pink-3:#2A2B2E; --pink-4:#2F3034; --pink-5:#36373B;
  --pink-6:#3E4044; --pink-7:#4A4C51; --pink-8:#5E6066; --pink-9:#8F9298; --pink-10:#A3A6AC;
  --pink-11:#B9BBC0; --pink-12:#F2F2F0;

  --white:#fff; --black:#000;
  --bg-default:#1D1E20; --bg-screen:#1D1E20; --bg-subtle:#242528; --bg-element:#2A2B2E;
  --bg-hover:#36373B; --bg-selected:#3E4044; --bg-overlay:#242528;
  --bg-success:var(--green-3); --bg-warning:var(--amber-3); --bg-danger:var(--red-3); --bg-info:var(--blue-3); --bg-preview:var(--blue-3);
  --text-default:#F2F2F0; --text-secondary:#B9BBC0; --text-tertiary:#9EA1A7; --text-quaternary:#8F9298;
  --text-link:#9DB6F2; --text-success:var(--green-11); --text-warning:var(--amber-11); --text-danger:var(--red-11); --text-info:var(--blue-11);
  --icon-default:#B9BBC0; --icon-secondary:#9EA1A7; --icon-tertiary:#8F9298; --icon-quaternary:#5E6066;
  --icon-success:var(--green-10); --icon-info:var(--blue-10);
  --border-default:#36383C; --border-secondary:#303235; --border-success:var(--green-7); --border-info:var(--blue-7);

  --btn-primary-bg:#0033A0; --btn-primary-text:#fff; --btn-primary-hover:#002B8A;
  --btn-secondary-bg:#2F3034; --btn-secondary-text:#F2F2F0; --btn-secondary-hover:#36373B;
  --btn-tertiary-border:#45474C; --btn-tertiary-text:#F2F2F0; --btn-tertiary-hover:#2F3034;
  --btn-quaternary-text:#F2F2F0; --btn-quaternary-hover:#2F3034;
  --cta-bg:#0033A0; --cta-text:#fff;

  --shadow-xs:0 1px 3px #0000004d, 0 1px 2px #0000004d;
  --shadow-sm:0 3px 6px #0006, 0 2px 4px #00000040;
  --shadow-md:0 10px 20px #00000040, 0 3px 6px #00000040;
  --shadow-lg:0 15px 25px #00000080, 0 5px 10px #00000040;
  --shadow-xl:0 20px 40px #00000080;

  --overlay:rgb(255 255 255 / .1);
  --corner-bg:rgb(0 0 0 / .4);
  --burst-t0:.14; --burst-t1:.22; --burst-t2:.32; --burst-dots:.9;
  --burst-tile-stroke:transparent; --burst-mark:var(--black);
  --soft-pill-bg:#2F3034;
  --mock-bg:#242528; --mock-line:var(--slate-4); --mock-line-strong:var(--slate-7);
  --stat-tile:#0033A0; --stat-tile-border:rgb(255 255 255 / .16);
  --cta-fade-to:var(--bg-default);
  --tile-shadow:0 5px 10px rgba(0,0,0,.4),0 15px 25px rgba(0,0,0,.35);
  --pill-hover-shadow:0 8px 22px -4px rgba(0,0,0,.7); --pill-tag-bg:var(--bg-element); --pill-tag-hover:var(--bg-hover);
  --theme-btn-hover:var(--bg-subtle);
  --app-icon-ring:rgb(255 255 255 / .06);

  --fn-1:#F2F2F0; --fn-2:#9DB6F2; --fn-3:#5B86EE; --fn-4:#4A6FD0; --fn-5:#A3B4DA; --fn-6:#5E6066; --fn-7:#3A3C41;
  --cp-quoted:#5B86EE; --cp-fair:#A3B4DA; --cp-assistant:#FF5A1F; --cp-backend:#C9643A; --cp-operator:#8F9298;
  --bp-1:#9DB6F2; --bp-2:#5B86EE; --bp-3:#A3B4DA; --bp-4:#5E6066;
  --lq-1:#161719; --lq-2:#0033A0; --lq-3:#4A6FD0; --lq-4:#5B86EE; --lq-5:#A3B4DA; --lq-6:#C9643A;

  color-scheme:dark;
}

/* JS off: follow the OS. Once data-theme is set, the blocks above win. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
  --bg:#1D1E20; --bg2:#242528; --ink:#F2F2F0; --dim:#B9BBC0; --mute:#8F9298;
  --line:#323438; --line2:#45474C; --accent:#9DB6F2; --fail:#FF5A1F; --warn:#FF7A45;
  --d-card:#2A2B2E; --d-deep:#161719; --d-navy:#0033A0; --d-navy-edge:#4A6FD0; --d-plan:#DCDBD6;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cb-ink:#FFFFFF; --cb-dim:#8FA6D6; --cb-line:#323438; --cb-paper:#1D1E20;
  --cb-accent:var(--accent); --cb-fail:var(--fail); --cb-warn:var(--warn);

  --slate-1:#1F2022; --slate-2:#242528; --slate-3:#2A2B2E; --slate-4:#2F3034; --slate-5:#36373B;
  --slate-6:#3E4044; --slate-7:#4A4C51; --slate-8:#5E6066; --slate-9:#7D8087; --slate-10:#91949A;
  --slate-11:#B9BBC0; --slate-12:#F2F2F0;

  --blue-1:#222429; --blue-2:#25282F; --blue-3:#2A2E38; --blue-4:#303644; --blue-5:#373F52;
  --blue-6:#404A63; --blue-7:#4D5A7C; --blue-8:#5F73A6; --blue-9:#5B86EE; --blue-10:#7A9DF2;
  --blue-11:#9DB6F2; --blue-12:#E3EBFF;

  --green-1:#222429; --green-2:#25282F; --green-3:#2A2E38; --green-4:#303644; --green-5:#373F52;
  --green-6:#404A63; --green-7:#4D5A7C; --green-8:#5F73A6; --green-9:#5B86EE; --green-10:#7A9DF2;
  --green-11:#9DB6F2; --green-12:#E3EBFF;

  --amber-1:#272220; --amber-2:#2C2420; --amber-3:#33261F; --amber-4:#3F2B1F; --amber-5:#57331F;
  --amber-6:#7A3E22; --amber-7:#B04A1F; --amber-8:#E2531D; --amber-9:#FF5A1F; --amber-10:#FF7038;
  --amber-11:#FF9466; --amber-12:#FFE1D3;

  --red-1:#272220; --red-2:#2C2420; --red-3:#33261F; --red-4:#3F2B1F; --red-5:#57331F;
  --red-6:#7A3E22; --red-7:#B04A1F; --red-8:#E2531D; --red-9:#FF5A1F; --red-10:#FF7038;
  --red-11:#FF9466; --red-12:#FFE1D3;

  --orange-1:#272220; --orange-2:#2C2420; --orange-3:#33261F; --orange-4:#3F2B1F; --orange-5:#57331F;
  --orange-6:#7A3E22; --orange-7:#B04A1F; --orange-8:#E2531D; --orange-9:#FF5A1F; --orange-10:#FF7038;
  --orange-11:#FF9466; --orange-12:#FFE1D3;

  --purple-1:#1F2022; --purple-2:#242528; --purple-3:#2A2B2E; --purple-4:#2F3034; --purple-5:#36373B;
  --purple-6:#3E4044; --purple-7:#4A4C51; --purple-8:#5E6066; --purple-9:#8F9298; --purple-10:#A3A6AC;
  --purple-11:#B9BBC0; --purple-12:#F2F2F0;

  --pink-1:#1F2022; --pink-2:#242528; --pink-3:#2A2B2E; --pink-4:#2F3034; --pink-5:#36373B;
  --pink-6:#3E4044; --pink-7:#4A4C51; --pink-8:#5E6066; --pink-9:#8F9298; --pink-10:#A3A6AC;
  --pink-11:#B9BBC0; --pink-12:#F2F2F0;

  --bg-default:#1D1E20; --bg-screen:#1D1E20; --bg-subtle:#242528; --bg-element:#2A2B2E;
  --bg-hover:#36373B; --bg-selected:#3E4044; --bg-overlay:#242528;
  --text-default:#F2F2F0; --text-secondary:#B9BBC0; --text-tertiary:#9EA1A7; --text-quaternary:#8F9298;
  --text-link:#9DB6F2; --text-success:var(--green-11); --text-warning:var(--amber-11); --text-danger:var(--red-11); --text-info:var(--blue-11);
  --icon-default:#B9BBC0; --icon-secondary:#9EA1A7; --icon-tertiary:#8F9298; --icon-quaternary:#5E6066;
  --border-default:#36383C; --border-secondary:#303235;
  --btn-primary-bg:#0033A0; --btn-primary-text:#fff; --btn-primary-hover:#002B8A;
  --btn-secondary-bg:#2F3034; --btn-secondary-text:#F2F2F0; --btn-secondary-hover:#36373B;
  --btn-tertiary-border:#45474C; --btn-tertiary-text:#F2F2F0; --btn-tertiary-hover:#2F3034;
  --btn-quaternary-text:#F2F2F0; --btn-quaternary-hover:#2F3034;
  --cta-bg:#0033A0; --cta-text:#fff;
  --shadow-xs:0 1px 3px #0000004d, 0 1px 2px #0000004d;
  --shadow-sm:0 3px 6px #0006, 0 2px 4px #00000040;
  --shadow-md:0 10px 20px #00000040, 0 3px 6px #00000040;
  --shadow-lg:0 15px 25px #00000080, 0 5px 10px #00000040;
  --shadow-xl:0 20px 40px #00000080;
  --overlay:rgb(255 255 255 / .1);
  --corner-bg:rgb(0 0 0 / .4);
  --burst-t0:.14; --burst-t1:.22; --burst-t2:.32; --burst-dots:.9;
  --burst-tile-stroke:transparent; --burst-mark:var(--black);
  --soft-pill-bg:#2F3034;
  --mock-bg:#242528;
  --stat-tile:#0033A0; --stat-tile-border:rgb(255 255 255 / .16);
  --cta-fade-to:var(--bg-default);
  --tile-shadow:0 5px 10px rgba(0,0,0,.4),0 15px 25px rgba(0,0,0,.35);
  --pill-hover-shadow:0 8px 22px -4px rgba(0,0,0,.7); --pill-tag-bg:var(--bg-element); --pill-tag-hover:var(--bg-hover);
  --theme-btn-hover:var(--bg-subtle);
  --app-icon-ring:rgb(255 255 255 / .06);
  --fn-1:#F2F2F0; --fn-2:#9DB6F2; --fn-3:#5B86EE; --fn-4:#4A6FD0; --fn-5:#A3B4DA; --fn-6:#5E6066; --fn-7:#3A3C41;
  --cp-quoted:#5B86EE; --cp-fair:#A3B4DA; --cp-assistant:#FF5A1F; --cp-backend:#C9643A; --cp-operator:#8F9298;
  --bp-1:#9DB6F2; --bp-2:#5B86EE; --bp-3:#A3B4DA; --bp-4:#5E6066;
  --lq-1:#161719; --lq-2:#0033A0; --lq-3:#4A6FD0; --lq-4:#5B86EE; --lq-5:#A3B4DA; --lq-6:#C9643A;
  color-scheme:dark;
  }
}