/* =========================================================================
   Vera Design System — Tokens
   Sources: sosafe-platform-engineering/fe-lib-ui-mantine-react
            (src/assets/supernova/base + src/assets/vera3)
   Primary color: Cyan (shade 8 = #0b7285)
   Font stack: Inter (body/headings) + Roboto Mono (code)
   ========================================================================= */

/* ---------- Brand fonts (Inter — local) ---------- */
/* Primary: variable axis (opsz 14–32, wght 100–900) — handles every weight + optical size */
@font-face {
  font-family: 'Inter';
  src: url("2d6ba1ce-ea3c-4ce0-889a-2c5b61fdf994") format('truetype-variations'),
       url("2d6ba1ce-ea3c-4ce0-889a-2c5b61fdf994") format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("bd350d19-499a-456a-958f-19ce96f34e48") format('truetype-variations'),
       url("bd350d19-499a-456a-958f-19ce96f34e48") format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Optical-size static masters — use these when targeting a fixed optical size */
/* 18pt — body & UI (default when size < 24) */
@font-face { font-family: 'Inter 18pt'; src: url("9c2cd463-2baa-41be-b7f7-a5e2eac29e45")           format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("35b2eebd-d8aa-4a9c-946c-6d169aa8878c")     format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("c78361e0-1ac4-4f3c-b74c-239be4325973")     format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("e93fb784-10b4-487d-866c-1ca596c3b69e") format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("38d4d418-dae5-4438-8d27-61fd0c98b9b3")          format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("81c08ae7-1065-45c2-8248-9eeb8415a6cb")    format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("807e1893-f272-4de6-a7bb-79f0d9729046")        format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("ecda12be-b96b-4446-a231-f7724c0b249d")         format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("40673df9-8af1-4d54-92d7-005d316cf452")         format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("1a6fb2f3-7859-43ae-a033-a9f072ab10de")   format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("481fd01b-dad9-4a17-ba4f-ec834eafde14")       format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("ade360d4-5858-4b32-94ae-6c8fe660dfb0") format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("88ac1cb9-fb32-42f4-b504-48da01abc03c")           format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("49ceb398-4f07-4064-b2be-bca9e32ff3c1")     format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("baee9434-75f2-4e7b-96b7-f0b891c0eed7")      format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("fa1b2151-82ff-4582-9a53-b2a1565c15e6") format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("0f1d3849-116d-46d4-aff2-4542faa93979")          format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 18pt'; src: url("83507552-dd35-4e41-a312-9e225f5a1b1e")    format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* 24pt — subheads & large UI */
@font-face { font-family: 'Inter 24pt'; src: url("0f5fa092-7ff7-4f06-a043-2cdd43d034a6")           format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("e8987b7b-cb5a-4c0a-b799-cd4a93a5c46b")     format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("ba7d7e10-b003-4d1a-8475-f591133ccde8")     format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("acc2ffd0-627f-4045-afc0-3abbed43c02e") format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("e54434f0-0699-42bc-b211-326eb1f8ac36")          format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("23cf37ba-a0f0-4bd9-966c-d285710e8245")    format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("47bbe988-d46d-49d5-9354-fb356dd4a4f7")        format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("d00f4f3e-f3a2-4f86-a041-f1de23485ab1")         format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("e0b429b1-f85b-4e70-9d34-d6edcd5982b3")         format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("45590af5-83f2-460b-ab0d-b44a07c0c84d")   format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("d760d7ad-b7d2-48e8-b305-a6d0f14d65dc")       format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("b11a16f7-8028-43a6-88a0-016da1e24ba1") format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("3bc7c205-ff19-4488-99bc-fd0a1b122bc8")           format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("5af64c96-886a-4f2d-8d79-33244648cfe0")     format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("c1a8d252-d19a-4221-9ce6-972b0cce2b6a")      format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("c37a612b-de0e-441a-930a-f1e0bb36df19") format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("291b3548-c3c3-4b87-a401-7602e8545ce0")          format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24pt'; src: url("dd3aa570-775c-4cba-a65c-d40960fd63e7")    format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* 28pt — display & marketing */
@font-face { font-family: 'Inter 28pt'; src: url("89af7515-d148-4642-bc07-1a4c94154339")           format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("e03306b8-d0d9-466e-ba89-825e68813bef")     format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("f85eb01f-d4f0-40d1-a374-048acad207fd")     format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("983e2404-a1e7-43ee-a0f0-a35f6e994f16") format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("24b29738-2d7c-4f24-8ad7-4e6b9ded65cf")          format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("3a1a43de-895b-4cf1-9827-0e0d80c75c5e")    format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("ca6ed516-d602-48c1-b7c9-a4bfd4ef6b25")        format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("31cc83f0-96ee-47f0-94dd-e8c5fcab533b")         format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("1dec51cd-31ec-4ce0-94f0-437c4ebe9640")         format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("43fec57f-e4ab-4975-bf4d-571e976bb83f")   format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("36b252de-c226-497b-9f62-e576b5788ae5")       format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("aa478723-b8f5-4164-8d99-47e9456ca888") format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("1fb42573-2932-4f7c-9ec1-140c7f2aff5b")           format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("2903b822-088a-4daa-9fa3-3949a62d7537")     format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("db59d134-34a8-4766-aca3-d5e7029e0038")      format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("23b148ed-60a3-4e24-8f5b-6fdd10fb1e8e") format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("a9a4f35b-0177-4b5f-af70-9268abdd58aa")          format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 28pt'; src: url("ff0ae883-3eed-4c4c-bf8d-af53a7dda679")    format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Color scales (0 = lightest, 9 = darkest) ---------- */
  --color-cyan-0: #e3fafc;  --color-cyan-1: #c5f6fa;
  --color-cyan-2: #99e9f2;  --color-cyan-3: #66d9e8;
  --color-cyan-4: #3bc9db;  --color-cyan-5: #22b8cf;
  --color-cyan-6: #15aabf;  --color-cyan-7: #1098ad;
  --color-cyan-8: #0b7285;  --color-cyan-9: #01505f;

  --color-gray-0: #f8f9fa;  --color-gray-1: #f1f3f5;
  --color-gray-2: #e9ecef;  --color-gray-3: #dee2e6;
  --color-gray-4: #ced4da;  --color-gray-5: #adb5bd;
  --color-gray-6: #868e96;  --color-gray-7: #495057;
  --color-gray-8: #343a40;  --color-gray-9: #212529;

  --color-dark-0: #c1c2c5;  --color-dark-1: #a6a7ab;
  --color-dark-2: #909296;  --color-dark-3: #5c5f66;
  --color-dark-4: #373a40;  --color-dark-5: #2c2e33;
  --color-dark-6: #25262b;  --color-dark-7: #1a1b1e;
  --color-dark-8: #141517;  --color-dark-9: #101113;

  --color-red-0: #fff5f5;  --color-red-1: #ffe3e3;
  --color-red-2: #ffc9c9;  --color-red-3: #ffa8a8;
  --color-red-4: #ff8787;  --color-red-5: #ff6b6b;
  --color-red-6: #fa5252;  --color-red-7: #f03e3e;
  --color-red-8: #e03131;  --color-red-9: #c92a2a;

  --color-orange-0: #fff4e6; --color-orange-1: #ffe8cc;
  --color-orange-2: #ffd8a8; --color-orange-3: #ffc078;
  --color-orange-4: #ffa94d; --color-orange-5: #ff922b;
  --color-orange-6: #fd7e14; --color-orange-7: #f76707;
  --color-orange-8: #e8590c; --color-orange-9: #c4400c;

  --color-yellow-0: #fff9db; --color-yellow-1: #fff3bf;
  --color-yellow-2: #ffec99; --color-yellow-3: #ffe066;
  --color-yellow-4: #ffd43b; --color-yellow-5: #fcc419;
  --color-yellow-6: #fab005; --color-yellow-7: #f59f00;
  --color-yellow-8: #f08c00; --color-yellow-9: #e67700;

  --color-green-0: #ebfbee; --color-green-1: #d3f9d8;
  --color-green-2: #b2f2bb; --color-green-3: #8ce99a;
  --color-green-4: #69db7c; --color-green-5: #51cf66;
  --color-green-6: #40c057; --color-green-7: #37b24d;
  --color-green-8: #2f9e44; --color-green-9: #277c38;

  --color-teal-0: #e6fcf5;  --color-teal-1: #c3fae8;
  --color-teal-2: #96f2d7;  --color-teal-3: #63e6be;
  --color-teal-4: #38d9a9;  --color-teal-5: #20c997;
  --color-teal-6: #12b886;  --color-teal-7: #0ca678;
  --color-teal-8: #099268;  --color-teal-9: #087f5b;

  --color-blue-0: #e7f5ff;  --color-blue-1: #d0ebff;
  --color-blue-2: #a5d8ff;  --color-blue-3: #74c0fc;
  --color-blue-4: #4dabf7;  --color-blue-5: #2e98ef;
  --color-blue-6: #228be6;  --color-blue-7: #1c7ed6;
  --color-blue-8: #1971c2;  --color-blue-9: #1864ab;

  --color-indigo-0: #edf2ff; --color-indigo-1: #dbe4ff;
  --color-indigo-2: #bac8ff; --color-indigo-3: #91a7ff;
  --color-indigo-4: #748ffc; --color-indigo-5: #5c7cfa;
  --color-indigo-6: #4c6ef5; --color-indigo-7: #4263eb;
  --color-indigo-8: #3b5bdb; --color-indigo-9: #364fc7;

  --color-violet-0: #f3f0ff; --color-violet-1: #e5dbff;
  --color-violet-2: #d0bfff; --color-violet-3: #b197fc;
  --color-violet-4: #9775fa; --color-violet-5: #845ef7;
  --color-violet-6: #7950f2; --color-violet-7: #7048e8;
  --color-violet-8: #6741d9; --color-violet-9: #5f3dc4;

  --color-grape-0: #f8f0fc;  --color-grape-1: #f3d9fa;
  --color-grape-2: #eebefa;  --color-grape-3: #e599f7;
  --color-grape-4: #da77f2;  --color-grape-5: #cc5de8;
  --color-grape-6: #be4bdb;  --color-grape-7: #ae3ec9;
  --color-grape-8: #9c36b5;  --color-grape-9: #862e9c;

  --color-pink-0: #fff0f6;  --color-pink-1: #ffdeeb;
  --color-pink-2: #fcc2d7;  --color-pink-3: #faa2c1;
  --color-pink-4: #f783ac;  --color-pink-5: #f06595;
  --color-pink-6: #e64980;  --color-pink-7: #d6336c;
  --color-pink-8: #c2255c;  --color-pink-9: #a61e4d;

  --color-lime-0: #f4fce3;  --color-lime-1: #e9fac8;
  --color-lime-2: #d8f5a2;  --color-lime-3: #c0eb75;
  --color-lime-4: #a9e34b;  --color-lime-5: #94d82d;
  --color-lime-6: #82c91e;  --color-lime-7: #74b816;
  --color-lime-8: #66a80f;  --color-lime-9: #5c940d;

  --color-white: #ffffff;
  --color-black: #000000;

  /* ---------- Primary (aliased to Cyan) ---------- */
  --color-primary-0: var(--color-cyan-0);
  --color-primary-1: var(--color-cyan-1);
  --color-primary-2: var(--color-cyan-2);
  --color-primary-3: var(--color-cyan-3);
  --color-primary-4: var(--color-cyan-4);
  --color-primary-5: var(--color-cyan-5);
  --color-primary-6: var(--color-cyan-6);
  --color-primary-7: var(--color-cyan-7);
  --color-primary-8: var(--color-cyan-8);  /* DEFAULT primary */
  --color-primary-9: var(--color-cyan-9);
  --color-primary-filled: var(--color-cyan-8);
  --color-primary-filled-hover: var(--color-cyan-9);
  --color-primary-light: #0b72851a;       /* cyan-8 @ 10% */
  --color-primary-light-hover: #0b728526; /* cyan-8 @ 15% */

  /* ---------- Semantic — Surfaces ---------- */
  /* Full Supernova names */
  --color-background-neutral-light: var(--color-white);    /* #ffffff */
  --color-background-neutral-dark: var(--color-gray-0);    /* #f8f9fa */
  --color-background-neutral-darker: var(--color-gray-1);  /* #f1f3f5 */
  --color-background-neutral-inverted: var(--color-gray-9);
  --color-background-layout-canvas: var(--color-white);
  --color-background-layout-panel: var(--color-white);
  --color-background-layout-main-nav: var(--color-gray-0);
  --color-background-disabled: var(--color-gray-1);

  /* Short aliases (kept for convenience) */
  --bg-canvas: var(--color-background-layout-canvas);
  --bg-panel: var(--color-background-layout-panel);
  --bg-main-nav: var(--color-background-layout-main-nav);
  --bg-neutral-light: var(--color-background-neutral-light);
  --bg-neutral-dark: var(--color-background-neutral-dark);
  --bg-neutral-darker: var(--color-background-neutral-darker);
  --bg-neutral-inverted: var(--color-background-neutral-inverted);
  --bg-highlight: #1971c21a;
  --bg-disabled: var(--color-background-disabled);

  /* ---------- Semantic — Text ---------- */
  --text-default: var(--color-gray-9);
  --text-neutral-dark: var(--color-gray-9);
  --text-neutral-light: var(--color-gray-7);   /* dimmed */
  --text-placeholder: var(--color-gray-6);
  --text-disabled: var(--color-gray-5);
  --text-inverted: var(--color-white);
  --text-anchor: var(--color-cyan-8);
  --text-primary: var(--color-cyan-8);

  /* ---------- Semantic — Borders ---------- */
  --border-neutral-light: var(--color-gray-4);
  --border-neutral-dark: var(--color-gray-6);
  --border-neutral-darker: var(--color-gray-9);
  --border-disabled: var(--color-gray-4);
  --border-selected: var(--color-cyan-8);
  --border-focus: var(--color-blue-8);
  --border-inverted: var(--color-white);

  /* ---------- Semantic — Feedback ---------- */
  /* Top-level aliases (Figma: color/error, color/warning, color/success, color/focus) */
  --color-error: var(--color-red-9);     /* #c92a2a */
  --color-warning: var(--color-orange-9); /* #c4400c */
  --color-success: var(--color-green-9); /* #277c38 */
  --color-info: var(--color-blue-8);     /* #1971c2 */
  --color-optional: var(--color-violet-8); /* #6741d9 */
  --color-focus: var(--color-blue-8);    /* #1971c2 */

  --feedback-error: var(--color-error);
  --feedback-error-bg-light: var(--color-red-1);
  --feedback-error-border-light: var(--color-red-4);
  --feedback-success: var(--color-success);
  --feedback-success-bg-light: var(--color-teal-0);
  --feedback-success-border-light: var(--color-green-3);
  --feedback-warning: var(--color-orange-9);
  --feedback-warning-bg-light: var(--color-orange-0);
  --feedback-warning-border-light: var(--color-orange-3);
  --feedback-info: var(--color-blue-8);
  --feedback-info-bg-light: var(--color-blue-0);
  --feedback-info-border-light: var(--color-blue-3);
  --feedback-optional: var(--color-violet-8);
  --feedback-optional-bg-light: var(--color-violet-0);
  --feedback-optional-border-light: var(--color-violet-3);
  --feedback-base: var(--color-gray-7);
  --feedback-base-bg-light: var(--color-gray-1);

  /* ---------- Spacing ---------- */
  --space-none: 0;
  --space-3xs: 0.25rem;   /* 4px  */
  --space-2xs: 0.5rem;    /* 8px  */
  --space-xs:  0.625rem;  /* 10px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */

  /* ---------- Border radius ---------- */
  --radius-none: 0;
  --radius-xs:  0.125rem; /* 2px  */
  --radius-sm:  0.25rem;  /* 4px  */
  --radius-md:  0.5rem;   /* 8px  — Vera default */
  --radius-lg:  1rem;     /* 16px */
  --radius-xl:  2rem;     /* 32px */
  --radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px 0 #00000003, 0 1px 3px 0 #0000000d;
  --shadow-sm: 0 7px 7px -5px #0000000a, 0 10px 15px -5px #0000000d, 0 1px 3px 0 #0000000d;
  --shadow-md: 0 10px 10px -5px #0000000a, 0 20px 25px -5px #0000000d, 0 1px 3px 0 #0000000d;
  --shadow-lg: 0 12px 12px -7px #0000000a, 0 28px 23px -7px #0000000d, 0 1px 3px 0 #0000000d;
  --shadow-xl: 0 17px 17px -7px #0000000a, 0 36px 28px -7px #0000000d, 0 1px 3px 0 #0000000d;
  --shadow-focus-outer: 0 0 0 2px var(--border-focus);
  --shadow-focus-inner: inset 0 0 0 2px var(--border-focus);

  /* ---------- Typography — families ---------- */
  --font-sans: 'Inter', Arial, sans-serif;
  --font-body: 'Inter 18pt', 'Inter', Arial, sans-serif;      /* 14–20 px */
  --font-subhead: 'Inter 24pt', 'Inter', Arial, sans-serif;   /* 20–32 px */
  --font-display: 'Inter 28pt', 'Inter', Arial, sans-serif;   /* 32 px + */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ---------- Typography — sizes ---------- */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 2rem;      /* 32 */

  /* ---------- Headings ---------- */
  --h1-size: 2rem;    --h1-lh: 2.5rem;
  --h2-size: 1.5rem;  --h2-lh: 2rem;
  --h3-size: 1.25rem; --h3-lh: 1.75rem;
  --h4-size: 1.125rem; --h4-lh: 1.5rem;
  --h5-size: 1rem;    --h5-lh: 1.5rem;
  --h6-size: 0.875rem; --h6-lh: 1.25rem;

  /* ---------- Breakpoints (reference, via media queries) ---------- */
  --bp-xs: 36em;  /* 576  */
  --bp-sm: 48em;  /* 768  */
  --bp-md: 62em;  /* 992  */
  --bp-lg: 75em;  /* 1200 */
  --bp-xl: 88em;  /* 1408 */
}

/* =========================================================================
   Base element styles
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-default);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-default);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
h2 { font-size: var(--h2-size); line-height: var(--h2-lh); }
h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }
h5 { font-size: var(--h5-size); line-height: var(--h5-lh); }
h6 { font-size: var(--h6-size); line-height: var(--h6-lh); }

p  { margin: 0 0 var(--space-md) 0; font-size: var(--fs-md); line-height: 1.5; }
small { font-size: var(--fs-xs); }

a {
  color: var(--text-anchor);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
code {
  background: var(--color-gray-1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Utility classes mirroring Mantine "body/title" text tokens */
.b1 { font-size: var(--fs-md); line-height: 1.5; font-weight: 400; }
.b2 { font-size: var(--fs-sm); line-height: 1.43; font-weight: 400; }
.b2-m { font-size: var(--fs-sm); line-height: 1.43; font-weight: 500; }
.b2-sb { font-size: var(--fs-sm); line-height: 1.43; font-weight: 600; }
.b3 { font-size: var(--fs-xs); line-height: 1.33; font-weight: 400; }
.b3-m { font-size: var(--fs-xs); line-height: 1.33; font-weight: 500; }
.dim { color: var(--text-neutral-light); }
.mono { font-family: var(--font-mono); }


/* ---- */


  /* SoSafe brand overrides — Manrope type, brand palette */
  :root{
    --font-sans:'Manrope','Inter',Arial,sans-serif;
    --font-display:'Manrope','Inter',Arial,sans-serif;
    --font-subhead:'Manrope','Inter',Arial,sans-serif;
    --color-cyan-8:#043F47;   /* SoSafe Green leads for accents/branding */
    --color-cyan-7:#065460;
    --color-cyan-9:#022a30;
    --brand-cyan:#16E6FF;      /* CTA / key interaction only */
    --brand-midnight:#171733;
    --brand-plum:#42033D;
  }
  html,body{margin:0;height:100%;background:#0f0f23;font-family:'Manrope','Inter',Arial,sans-serif}
  *{box-sizing:border-box}
  a{color:var(--color-cyan-6)}a:hover{color:var(--color-cyan-4)}
  @keyframes flagpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
  @keyframes pulsering{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
  @keyframes softin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes bardown{from{width:100%}to{width:0}}
  @keyframes glitch{0%,92%,100%{opacity:0}94%{opacity:.5;transform:translateX(-2px)}96%{opacity:.3;transform:translateX(2px)}}
  @keyframes dfflk{0%,88%,100%{opacity:.1}91%{opacity:.42}94%{opacity:.06}97%{opacity:.34}}
  @keyframes dftear{0%,49%{top:-14%;opacity:0}50%{opacity:.5}51%{opacity:0}52%,100%{top:118%;opacity:0}}
  @keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes breathe{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
  @keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
  @keyframes ringpulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.9);opacity:0}}
  .fade{animation:softin .35s ease both}
  ::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
  @media (max-width:860px){
    .app-root{height:auto!important;min-height:100vh;overflow:auto!important}
    .sc-split{flex-direction:column!important;min-height:0!important}
    .sc-left{width:100%!important;flex:none!important;padding:22px 14px 26px!important;min-height:42vh}
    .sc-right{flex:none!important;width:100%!important}
    .sc-right>div{padding:26px 20px!important}
  }
  @media (max-width:560px){
    .sc-left{zoom:.66}
    .top-bar{padding:0 12px!important}
  }