/* Ecosa design system tokens — copied verbatim from the ecosa-design skill
   (tokens/colors, typography, spacing, radius, elevation, motion, semantic).
   Style from these, never from a hex. Below them: the app's own variable names
   mapped onto the tokens, the two themes, and the brand fonts. */

/* ---- tokens/colors.css ---- */
/* Base palette — verbatim from the Ecosa brand colour rundown.
   BLACK IS NOT A BRAND COLOUR. There is no near-black in this system: the darkest
   value is Dark Blue #091B52, and the darkest neutral is Dark Grey #6A6A6A.
   Any colour named 40% or 20% is a TINT — a supporting container or graphic field
   behind content, never a core brand colour and never a text colour. */
:root{
  /* Core */
  --ecosa-dark-blue:#091B52;     /* Dark Blue / App Blue — the sleep-tech surface */
  --ecosa-blue:#10318E;          /* Ecosa Blue — primary. PMS 286 C / Blue 072 U */
  --ecosa-lavender:#E8D7FF;      /* Secondary. PMS 2635 C/U */
  --ecosa-light-blue:#A4C8FF;    /* Secondary. PMS 278 C/U */
  --ecosa-yellow:#FFC62C;        /* Call to action. PMS 128 C/U */
  --ecosa-sale-orange:#FF8A00;   /* Sale Orange */
  --ecosa-coral:#F78375;         /* Promotional elements only. PMS 170 C/U */
  --ecosa-kids-green:#E7FFC9;    /* Kids Green — kids and cot range */
  --ecosa-white:#FFFFFF;

  /* Tints — supporting containers and graphic fields. Never core, never text. */
  --ecosa-blue-40:#A1ADCF;
  --ecosa-blue-20:#E6E9F2;
  --lavender-40:#F5EFFE;
  --lavender-20:#F9F7FE;
  --light-blue-40:#DCE9FD;
  --light-blue-20:#EEF4FE;

  /* Greys */
  --ecosa-light-grey:#F8F8FA;    /* offset backgrounds in a mostly-white layout */
  --ecosa-grey:#E0E0E0;          /* break lines, bounding strokes, subtle icons. PMS Cool Grey 1 C */
  --ecosa-dark-grey:#6A6A6A;     /* body copy */

  /* Status */
  --alert-green:#84BA3F;         /* small icons, active + success. PMS 7489 C */
  --text-green:#478509;          /* copy accompanying Alert Green */
  --text-red:#D53C3C;            /* error and sale text */

  /* Interactive states derived from Ecosa Blue — UI only, not palette colours. */
  --blue-900:var(--ecosa-dark-blue);
  --blue-800:#0B2469;
  --blue-700:var(--ecosa-blue);
  --blue-600:#1C46B4;
  --blue-500:#2F5FD4;

  /* THE ONE EXCEPTION TO "BLACK IS NOT A BRAND COLOUR": Black Friday.
     It is the biggest sale of the year and is deliberately styled to look nothing like our
     usual campaigns — black is what makes that break legible. Scoped to Black Friday only:
     never product pages, brand surfaces, decks or any other sale. */
  --bf-ink:#000000;

  /* Gradients. Four only, each scoped to a purpose — never decorative, never on brand
     surfaces or body copy. ANGLE IS OPEN — pick it per design. Each gradient ships as a
     vertical default plus its stops, so pass a custom angle with the *-from / *-to values:
       background: linear-gradient(135deg, var(--gradient-member-from), var(--gradient-member-to)); */
  --gradient-member:linear-gradient(0deg,#10318E,#537EFF); /* @kind other */
  --gradient-afterpay:linear-gradient(180deg,#10318E,#AEF7E2); /* @kind other */
  --gradient-sleep-app:linear-gradient(180deg,#3458FF,#997CFF); /* @kind other */
  --gradient-gold:linear-gradient(180deg,#E9C86F,#F9F4E7 50%,#E9C86F); /* @kind other */
  --gradient-member-from:#10318E;
  --gradient-member-to:#537EFF;
  --gradient-afterpay-from:#10318E;
  --gradient-afterpay-to:#AEF7E2;
  --gradient-sleep-app-from:#3458FF;
  --gradient-sleep-app-to:#997CFF;
  --gradient-gold-from:#E9C86F;
  --gradient-gold-mid:#F9F4E7;
  --gradient-gold-to:#E9C86F;

  /* Aliases — earlier work in this system used these names. */
  --ecosa-cobalt:var(--ecosa-blue);
  --ecosa-sky:var(--ecosa-light-blue);
  --ecosa-sun:var(--ecosa-yellow);
  --ecosa-canary:var(--ecosa-yellow);
  --blue-40:var(--ecosa-blue-40);
  --blue-20:var(--ecosa-blue-20);
  --lavender-tint:var(--lavender-40);
  --sky-tint:var(--light-blue-40);
  --sun-tint:#FFF4D6;
  --coral-tint:#FEEAE7;
  --cobalt-900:var(--blue-900);
  --cobalt-800:var(--blue-800);
  --cobalt-700:var(--blue-700);
  --cobalt-600:var(--blue-600);
  --cobalt-500:var(--blue-500);
  --cobalt-300:var(--ecosa-blue-40);
  --cobalt-100:var(--ecosa-blue-20);
  --cobalt-50:var(--light-blue-20);
  --grey-700:var(--ecosa-dark-grey);
  --grey-600:#8A8A8A;
  --grey-500:#A3A3A3;
  --grey-400:#C4C4C4;
  --grey-300:var(--ecosa-grey);
  --grey-200:#EAEAEC;
  --grey-100:#F1F1F3;
  --grey-50:var(--ecosa-light-grey);
  --grey-800:var(--ecosa-dark-grey);
  --grey-900:var(--ecosa-blue);
}

/* ---- tokens/typography.css ---- */
/* Typography — from Ecosa Brand Guidelines "Brand Typography" + "Type scale guide".
   Two families, one rule of thumb: Filson Pro for headings, Nimbus Sans for everything
   read in a paragraph. Line-height is 125% almost everywhere; 140% on caps styles.
   Letter-spacing is 0 on headings and body — tracking only appears on caps styles. */
:root{
  --font-display:"filson-pro","Filson Pro","Avenir Next",system-ui,sans-serif;
  --font-body:"nimbus-sans","Nimbus Sans D","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Weights */
  --fw-light:300;        /* @kind font */
  --fw-regular:400;      /* @kind font */
  --fw-book:425; /* @kind font */ /* Caps 2/3 and all Price styles */
  --fw-medium:500; /* @kind font */ /* Filson Pro Medium, every heading */
  --fw-bold:700;         /* @kind font */
  --fw-display:500;      /* @kind font */
  --fw-body:400;         /* @kind font */
  --fw-body-strong:700;  /* @kind font */

  /* Line heights */
  --lh-heading:1.25; /* @kind other */ /* 125%, every heading */
  --lh-body:1.25; /* @kind other */ /* 125%, every body style */
  --lh-caps:1.4; /* @kind other */ /* 140%, every caps style */
  --lh-tight:1.25;    /* @kind other */
  --lh-snug:1.25;     /* @kind other */
  --lh-normal:1.25;   /* @kind other */
  --lh-relaxed:1.4;   /* @kind other */

  /* Letter spacing */
  --ls-display:0em;      /* @kind other */
  --ls-heading:0em;      /* @kind other */
  --ls-body:0em;         /* @kind other */
  --ls-caps:0.1em; /* @kind other */ /* Caps 1, 2, 3 */
  --ls-caps-bold:2px; /* @kind other */ /* Caps BOLD */
  --ls-caps-wide-lg:11px; /* @kind other */ /* Caps wide large */
  --ls-caps-wide:4.8px; /* @kind other */ /* Caps wide medium & small */

  /* Heading ladder — Filson Pro Medium 500, 125% line-height, 0 tracking */
  --fs-h0:64px;
  --fs-h1:48px;
  --fs-h2:40px;
  --fs-h3:36px;
  --fs-h4:32px;
  --fs-h5:30px;
  --fs-h6:28px;
  --fs-h7:26px;
  --fs-h8:22px;
  --fs-h9:20px;
  --fs-h10:18px;
  --fs-h11:16px;
  --fs-h12:14px;

  /* Product title — Filson Pro BOLD 700, underlined */
  --fs-product-h1:30px;
  --fs-product-h1-mobile:24px;

  /* Body ladder — Nimbus Sans Regular 400, 125% line-height.
     Body 2 (18px) is general body copy. */
  --fs-body-0:24px;
  --fs-body-1:20px;
  --fs-body-2:18px;
  --fs-body-3:16px;
  --fs-body-4:15px;  /* Light cut is weight 400 per the guidelines CSS */
  --fs-body-5:14px;
  --fs-body-6:12px;

  /* Caps styles */
  --fs-caps-1:28px;         /* Nimbus Sans 400 · 140% · 0.1em */
  --fs-caps-bold:22px;      /* Filson Pro 700 · 140% · 2px */
  --fs-caps-2:20px;         /* Filson Pro 425 · 140% · 0.1em — sub-heading above a heading */
  --fs-caps-3:16px;         /* Filson Pro 425 · 24px · 0.1em — sub-heading above a heading */
  --fs-caps-wide-lg:22px;   /* Filson Pro 500 · 125% · 11px — large screens */
  --fs-caps-wide-md:18px;   /* Filson Pro 500 · 125% · 4.8px — EDMs */
  --fs-caps-wide-sm:16px;   /* Filson Pro 500 · 125% · 4.8px — small screens */

  /* Price styles — Nimbus Sans 425, 125%. Strike variants add line-through.
     Sizes follow the CSS blocks in the guidelines, not the style titles. */
  --fs-price-1:30px;
  --fs-price-2:20px;
  --fs-price-3:12px;
  --fs-price-4:14px;

  /* Generic aliases — mapped onto the real ladder so existing work stays on-brand. */
  --fs-3xs:12px;
  --fs-2xs:12px;
  --fs-xs:14px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:20px;
  --fs-xl:22px;
  --fs-2xl:30px;
  --fs-3xl:36px;
  --fs-4xl:48px;
  --fs-5xl:48px;
  --fs-6xl:64px;
  --fs-7xl:64px;

  /* ── Responsive scale ───────────────────────────────────────────────────────
     A different H1–H6 per page context, desktop and mobile. Use these in preference
     to the raw ladder whenever you know which surface you are on. EDM is desktop only. */
  --fs-h1-home:48px;        --fs-h1-home-m:32px;
  --fs-h1-category:40px;    --fs-h1-category-m:30px;
  --fs-h1-landing:40px;     --fs-h1-landing-m:30px;
  --fs-h1-product:30px;     --fs-h1-product-m:24px;
  --fs-h1-edm:48px;

  --fs-h2-home:36px;        --fs-h2-home-m:30px;
  --fs-h2-category:36px;    --fs-h2-category-m:28px;
  --fs-h2-landing:36px;     --fs-h2-landing-m:28px;
  --fs-h2-product:36px;     --fs-h2-product-m:30px;
  --fs-h2-edm:36px;

  --fs-h3-home:32px;        --fs-h3-home-m:22px;
  --fs-h3-category:26px;    --fs-h3-category-m:22px;
  --fs-h3-landing:26px;     --fs-h3-landing-m:22px;
  --fs-h3-product:22px;     --fs-h3-product-m:22px;
  --fs-h3-edm:26px;

  --fs-h4-home:22px;        --fs-h4-home-m:20px;
  --fs-h4-category:22px;    --fs-h4-category-m:20px;
  --fs-h4-landing:22px;     --fs-h4-landing-m:20px;
  --fs-h4-product:22px;     --fs-h4-product-m:18px;
  --fs-h4-edm:22px;

  --fs-h5-home:18px;        --fs-h5-home-m:18px;
  --fs-h5-category:18px;    --fs-h5-category-m:18px;
  --fs-h5-landing:18px;     --fs-h5-landing-m:18px;
  --fs-h5-product:18px;     --fs-h5-product-m:16px;

  --fs-h6-home:16px;        --fs-h6-home-m:16px;
  --fs-h6-category:16px;    --fs-h6-category-m:16px;
  --fs-h6-landing:16px;     --fs-h6-landing-m:16px;
  --fs-h6-product:16px;     --fs-h6-product-m:14px;

  /* Roles */
  --type-hero-size:var(--fs-h0);
  --type-hero-lh:var(--lh-heading); /* @kind other */
  --type-h1-size:var(--fs-h1);
  --type-h2-size:var(--fs-h2);
  --type-h3-size:var(--fs-h3);
  --type-h4-size:var(--fs-h4);
  --type-body-size:var(--fs-body-2);
  --type-body-lh:var(--lh-body); /* @kind other */
  --type-small-size:var(--fs-body-5);
  --type-eyebrow-size:var(--fs-caps-3);
}

/* ---- tokens/spacing.css ---- */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Superseded by tokens/layout.css, kept so existing references resolve. These now carry the
     real grid's values rather than the round numbers they held before: the content width is
     1168px (12 x 68 + 11 x 32), not 1280, and the gutters are the grid's own. */
  --gutter-mobile:var(--grid-mobile-margin);
  --gutter-desktop:var(--grid-desktop-margin-min);
  --container-max:var(--grid-desktop-content);
  --container-narrow:720px;
  --section-y-mobile:56px;
  --section-y-desktop:96px;
}

/* ---- tokens/radius.css ---- */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-pill:999px;
  /* The bookend artwork rounds 8 on a 73px-wide panel — the brand's tab device */
  --radius-bookend:8px;
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Shadows are tinted with Ecosa Blue, never black. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(16,49,142,.07);
  --shadow-sm:0 2px 6px rgba(16,49,142,.08);
  --shadow-md:0 6px 20px rgba(16,49,142,.11);
  --shadow-lg:0 16px 40px rgba(16,49,142,.15);
  --shadow-cobalt:0 12px 32px rgba(16,49,142,.22);
  --scrim:rgba(16,49,142,.45);
  --border-hairline:1px solid var(--ecosa-grey);
  --border-strong:1px solid var(--ecosa-grey);
  --border-brand:1.5px solid var(--ecosa-blue);
  --focus-ring:0 0 0 3px rgba(164,200,255,.9);
}

/* ---- tokens/motion.css ---- */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out-soft:cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --dur-drift:900ms; /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard); /* @kind other */
}

/* ---- tokens/semantic.css ---- */
:root{
  /* Surfaces */
  --surface-page:var(--ecosa-white);
  --surface-muted:var(--ecosa-light-grey);
  --surface-card:var(--ecosa-white);
  --surface-inverse:var(--ecosa-blue);
  --surface-app:var(--ecosa-dark-blue);
  --surface-accent-kids:var(--ecosa-kids-green);
  --surface-wash-lavender:var(--lavender-40);
  --surface-wash-sky:var(--light-blue-40);
  --surface-wash-sun:var(--sun-tint);
  --surface-accent-lavender:var(--ecosa-lavender);
  --surface-accent-sky:var(--ecosa-light-blue);

  /* Text. Ecosa Blue for headings and CTAs; Dark Grey for body.
     Lavender and White text are ONLY legible on an Ecosa Blue background.
     Never set text in a tint. */
  --text-heading:var(--ecosa-blue);
  --text-body:var(--ecosa-dark-grey);
  --text-muted:var(--ecosa-dark-grey);
  --text-inverse:var(--ecosa-white);
  --text-on-accent:var(--ecosa-blue);
  --text-on-blue:var(--ecosa-white);
  --text-on-blue-soft:var(--ecosa-lavender);
  --text-link:var(--ecosa-blue);
  --text-link-hover:var(--blue-600);

  /* Lines — Grey is the break-line and bounding-stroke colour */
  --line-subtle:var(--ecosa-grey);
  --line-default:var(--ecosa-grey);
  --line-strong:var(--ecosa-blue);

  /* Interactive — primary */
  --action-primary-bg:var(--ecosa-blue);
  --action-primary-bg-hover:var(--blue-800);
  --action-primary-bg-active:var(--blue-900);
  --action-primary-fg:var(--ecosa-white);
  /* Interactive — secondary (outline) */
  --action-secondary-fg:var(--ecosa-blue);
  --action-secondary-border:var(--ecosa-blue);
  --action-secondary-bg-hover:var(--light-blue-20);
  /* Interactive — accent. Canary is the call-to-action colour; its label is Ecosa Blue. */
  --action-accent-bg:var(--ecosa-canary);
  --action-accent-fg:var(--ecosa-blue);
  --action-disabled-bg:var(--ecosa-grey);
  --action-disabled-fg:var(--grey-500);

  /* Status */
  --status-success:var(--text-green);
  --status-success-bg:#EEF6E3;
  --status-success-icon:var(--alert-green);
  --status-warning:#8A5A00;
  --status-warning-bg:var(--sun-tint);
  --status-error:var(--text-red);
  --status-error-bg:var(--coral-tint);
  --status-info:var(--ecosa-blue);
  --status-info-bg:var(--light-blue-20);
  /* Coral is promotional only — sale flashes, promo badges. Not a semantic error colour. */
  --status-sale:var(--ecosa-sale-orange);
  --status-promo:var(--ecosa-coral);
  --text-sale:var(--text-red);
}

/* ---- fonts ----------------------------------------------------------------
   The Adobe Fonts kit (txd1yel) is linked per page from base.html, never
   @imported. Filson Pro Medium is registered locally under the kit's family
   name so headings are always Filson. The local Nimbus Sans is the Light cut
   only, so it is registered under the legacy alias and NOT under "nimbus-sans":
   when the kit does not serve, body copy falls back to Helvetica Neue rather
   than to a synthesised Light. */
@font-face { font-family: "filson-pro"; src: local("Filson Pro Medium"), url("/static/fonts/FilsonProMed.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Filson Pro Web"; src: url("/static/fonts/FilsonProMed.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nimbus Sans D"; src: url("/static/fonts/NimbusSanD-Lig.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
:root {
  --font-display: "filson-pro", "Filson Pro Web", "Filson Pro", "Avenir Next", system-ui, sans-serif;
  --font-body: "nimbus-sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Weights, lighter than the system's defaults (Steph, 18 September 2026:
     "use thinner version of the fonts"). Headings and caps labels in Filson Pro
     Regular 400; chrome that used to be bold at 500, which Nimbus renders as
     Regular; emphasis in copy at 500 too, carried by colour rather than weight.
     The only Filson on disk is Medium, so the lighter cut shows where the Adobe
     Fonts kit serves. */
  --fw-display: 400;
  --fw-caps: 400;
  --fw-ui-bold: 500;
  --fw-strong: 500;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fw-strong: 700; } }
:root[data-theme="dark"] { --fw-strong: 700; }

/* ---- the app's names, on the tokens -----------------------------------------
   pages.css and app.css were written against these eight variables. They now
   resolve to the design system, so a token change reaches every rule at once.
   Light: white page, Ecosa Blue ink, Dark Grey body copy, Grey rules, lavender
   washes. Dark: the Ecosa Sleep app surface, Dark Blue, with white ink. */
:root, :root[data-theme="light"] {
  --paper: var(--ecosa-white);
  --ink: var(--ecosa-blue);
  --ink-soft: var(--ecosa-dark-grey);
  --body: var(--ecosa-dark-grey);
  --slate: var(--ecosa-dark-grey);
  --yellow: var(--ecosa-yellow);
  --sky: var(--ecosa-light-blue);
  --sky-wash: var(--light-blue-20);
  --rule: var(--ecosa-grey);
  --card: var(--lavender-40);
  --panel: var(--ecosa-lavender);
  --lavender: var(--ecosa-lavender);
  --lavender-soft: var(--lavender-20);
  --muted: var(--ecosa-light-grey);
  --cobalt: var(--ecosa-blue);
  --th-bg: var(--ecosa-white);
  --th-text: var(--ecosa-blue);
  --code-bg: var(--ecosa-light-grey);
  --hover: var(--light-blue-20);
  --on-yellow: var(--ecosa-blue);
  --shadow-float: var(--shadow-lg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--ecosa-dark-blue); --ink: var(--ecosa-white); --ink-soft: rgba(255,255,255,0.78);
    --body: rgba(255,255,255,0.86); --slate: rgba(255,255,255,0.74);
    --rule: rgba(255,255,255,0.22); --card: rgba(255,255,255,0.08); --panel: rgba(255,255,255,0.10);
    --lavender: var(--ecosa-lavender); --lavender-soft: rgba(255,255,255,0.06); --muted: rgba(255,255,255,0.06);
    --cobalt: var(--ecosa-white); --th-bg: transparent; --th-text: var(--ecosa-white); --code-bg: rgba(255,255,255,0.08);
    --sky-wash: rgba(164,200,255,0.16); --hover: rgba(255,255,255,0.10); --on-yellow: var(--ecosa-blue);
    --text-body: rgba(255,255,255,0.86); --text-heading: var(--ecosa-white); --text-link: var(--ecosa-white);
    --shadow-float: 0 16px 40px rgba(0,0,0,0.35);
    /* Tints are translucent on the dark surface, so a notice or a status field still reads. Error copy takes Coral here: Text Red is 3:1 on Dark Blue. */
    --sun-tint: rgba(255,198,44,0.16); --coral-tint: rgba(247,131,117,0.16); --status-error-bg: rgba(247,131,117,0.16); --status-success-bg: rgba(132,186,63,0.18); --status-info-bg: rgba(164,200,255,0.14);
    --light-blue-20: rgba(164,200,255,0.14); --light-blue-40: rgba(164,200,255,0.26); --text-red: var(--ecosa-coral); --text-link-hover: var(--ecosa-light-blue);
  }
}
:root[data-theme="dark"] {
  --paper: var(--ecosa-dark-blue); --ink: var(--ecosa-white); --ink-soft: rgba(255,255,255,0.78);
  --body: rgba(255,255,255,0.86); --slate: rgba(255,255,255,0.74);
  --rule: rgba(255,255,255,0.22); --card: rgba(255,255,255,0.08); --panel: rgba(255,255,255,0.10);
  --lavender: var(--ecosa-lavender); --lavender-soft: rgba(255,255,255,0.06); --muted: rgba(255,255,255,0.06);
  --cobalt: var(--ecosa-white); --th-bg: transparent; --th-text: var(--ecosa-white); --code-bg: rgba(255,255,255,0.08);
  --sky-wash: rgba(164,200,255,0.16); --hover: rgba(255,255,255,0.10); --on-yellow: var(--ecosa-blue);
  --text-body: rgba(255,255,255,0.86); --text-heading: var(--ecosa-white); --text-link: var(--ecosa-white);
  --shadow-float: 0 16px 40px rgba(0,0,0,0.35);
  --sun-tint: rgba(255,198,44,0.16); --coral-tint: rgba(247,131,117,0.16); --status-error-bg: rgba(247,131,117,0.16); --status-success-bg: rgba(132,186,63,0.18); --status-info-bg: rgba(164,200,255,0.14);
  --light-blue-20: rgba(164,200,255,0.14); --light-blue-40: rgba(164,200,255,0.26); --text-red: var(--ecosa-coral); --text-link-hover: var(--ecosa-light-blue);
}