/* =====================================================================
   Design-system tokens — brand aligned.

   These were a neutral-grey ramp (#282828 … #808080) with an orange
   "brand" accent (#F26B3A), which matched nothing in the product: the
   themes, grids, PrimeNG surfaces and the API Maker / SAVA logos are all
   built on brand blue (#0C53A4 / #61AFEF) + brand green (#00893F / #2FB36A)
   over a dark navy canvas.

   The ramps below keep the ORIGINAL lightness steps (so anything sized or
   contrasted against them is unchanged) and only shift the hue onto the
   brand's navy/blue axis. Content ramps are tinted cool for the same reason
   — pure grey text reads muddy over a navy surface.
   ===================================================================== */
:root {
    /* ---- Surfaces: brand navy canvas (was neutral grey #282828…) ---- */
    --bg-primary: #0f1622;
    --bg-primary--shade--one: #141c29;
    --bg-primary--shade--two: #1a2436;
    --bg-primary--shade--three: #22304a;
    --bg-primary--shade--four: #2d3d5c;
    --bg-secondary: #141c29;
    --bg-secondary--shade--one: #1a2436;
    --bg-secondary--shade--two: #22304a;
    --bg-secondary--shade--three: #2d3d5c;
    --bg-secondary--shade--four: #3a4d70;
    --bg-tertiary: #1b2636;
    --bg-tertiary--shade--one: #22304a;
    --bg-tertiary--shade--two: #2a3a52;
    --bg-tertiary--shade--three: #354865;
    --bg-tertiary--shade--four: #42587c;

    /* ---- Hairlines: brand-blue tinted borders (was #434343…) ---- */
    --hairline-regular: #22324a;
    --hairline-regular--shade--one: #2a3a52;
    --hairline-regular--shade--two: #33455f;
    --hairline-regular--shade--three: #3b567c;
    --hairline-regular--shade--four: #4a6a94;
    --hairline-strong: #2a3a52;
    --hairline-strong--shade--one: #33455f;
    --hairline-strong--shade--two: #3b567c;
    --hairline-strong--shade--three: #4a6a94;
    --hairline-strong--shade--four: #5c7fae;

    /* ---- Content: same lightness as before, cool-tinted for the navy canvas ---- */
    --content-primary: #eef2f7;
    --content-primary--shade--one: #e6ebf2;
    --content-primary--shade--two: #dbe2ec;
    --content-primary--shade--three: #c6cfdd;
    --content-primary--shade--four: #adbacd;
    --content-secondary: #93a3b8;
    --content-secondary--shade--one: #8a9bb1;
    --content-secondary--shade--two: #8093ab;
    --content-secondary--shade--three: #6d8099;
    --content-secondary--shade--four: #55677f;
    --content-tertiary: #6d8099;
    --content-tertiary--shade--one: #7789a1;
    --content-tertiary--shade--two: #8193aa;
    --content-tertiary--shade--three: #93a3b8;
    --content-tertiary--shade--four: #adbacd;

    /* ---- Brand: SAVA / API Maker blue (was orange #F26B3A) ---- */
    --brand-primary: #0C53A4;
    --brand-primary--highlight: rgba(12, 83, 164, 0.2);
    --brand-primary--shade--one: #0e5fbd;
    --brand-primary--shade--two: #146ed3;
    --brand-primary--shade--three: #3D8BE0;
    --brand-primary--shade--four: #61AFEF;
    /* Bright brand blue — also the `.put` request-method accent on dark surfaces. */
    --brand-secondary: #61AFEF;
    --brand-secondary--highlight: rgba(97, 175, 239, 0.2);
    --brand-secondary--shade--one: #74b9f1;
    --brand-secondary--shade--two: #8cc6ff;
    --brand-secondary--shade--three: #3D8BE0;
    --brand-secondary--shade--four: #0C53A4;
    /* Brand green — the second half of the logo gradient. */
    --brand-accent: #00893F;
    --brand-accent--highlight: rgba(0, 137, 63, 0.2);
    --brand-accent--shade--one: #00a04a;
    --brand-accent--shade--two: #2FB36A;
    --brand-accent--shade--three: #3DBE79;
    --brand-accent--shade--four: #6fdcaa;

    /* ---- Semantic accents (kept semantic; success moved onto the brand green) ---- */
    --accent-error: #ED4B48;
    --accent-error--highlight: rgba(237, 75, 72, 0.2);
    --accent-error--shade--one: #eb3935;
    --accent-error--shade--two: #e92623;
    --accent-error--shade--three: #d41815;
    --accent-error--shade--four: #a51310;
    --accent-error--shade--five: rgb(107 28 33);
    --accent-warning: #FFB400;
    --accent-warning--highlight: rgba(255, 180, 0, 0.2);
    --accent-warning--shade--one: #ffba14;
    --accent-warning--shade--two: #ffc029;
    --accent-warning--shade--three: #ffcb4d;
    --accent-warning--shade--four: #ffda80;
    --accent-success: #2FB36A;
    --accent-success--highlight: rgba(47, 179, 106, 0.2);
    --accent-success--shade--one: #3DBE79;
    --accent-success--shade--two: #4fca88;
    --accent-success--shade--three: #6fdcaa;
    --accent-success--shade--four: #8fd9b6;
    --color-darkest: #ffffff;
    --color-darkest--shade--one: #f5f7fa;
    --color-darkest--shade--two: #eef2f7;
    --color-darkest--shade--three: #dbe2ec;
    --color-darkest--shade--four: #bcc8d8;

    /* ---- Dark-mode surface aliases (footer, quill, misc) — same navy ramp ---- */
    --dark-bg-primary: #141c29;
    --dark-bg-primary--shade--one: #1a2436;
    --dark-bg-primary--shade--two: #22304a;
    --dark-bg-primary--shade--three: #2d3d5c;
    --dark-bg-primary--shade--four: #3a4d70;
    --dark-bg-secondary: #16202e;
    --dark-bg-secondary--shade--one: #1d283a;
    --dark-bg-secondary--shade--two: #25334c;
    --dark-bg-secondary--shade--three: #31415f;
    --dark-bg-secondary--shade--four: #3e5174;
    --dark-bg-tertiary: #1b2636;
    --dark-bg-tertiary--shade--one: #22304a;
    --dark-bg-tertiary--shade--two: #2a3a52;
    --dark-bg-tertiary--shade--three: #354865;
    --dark-bg-tertiary--shade--four: #42587c;
    --dark-hairline-regular: #1e2b3f;
    --dark-hairline-regular--shade--one: #26344b;
    --dark-hairline-regular--shade--two: #2e3f59;
    --dark-hairline-regular--shade--three: #3a4f70;
    --dark-hairline-regular--shade--four: #4a6a94;
    --dark-hairline-strong: #33455f;
    --dark-hairline-strong--shade--one: #3b567c;
    --dark-hairline-strong--shade--two: #44618a;
    --dark-hairline-strong--shade--three: #5c7fae;
    --dark-hairline-strong--shade--four: #7b9cc6;
    --dark-content-primary: #eef2f7;
    --dark-content-primary--shade--one: #e6ebf2;
    --dark-content-primary--shade--two: #dbe2ec;
    --dark-content-primary--shade--three: #c6cfdd;
    --dark-content-primary--shade--four: #adbacd;
    --dark-content-secondary: #8093ab;
    --dark-content-secondary--shade--one: #76899f;
    --dark-content-secondary--shade--two: #6d8099;
    --dark-content-secondary--shade--three: #5c6e86;
    --dark-content-secondary--shade--four: #42526a;
    --dark-color-lightest: #FFFFFF;
    --dark-color-lightest--shade--one: #f5f7fa;
    --dark-color-lightest--shade--two: #eef2f7;
    --dark-color-lightest--shade--three: #dbe2ec;
    --dark-color-lightest--shade--four: #bcc8d8;
}