/* Design tokens. Every colour in the site comes from here.
   Light is the default; dark overrides the SURFACES and keeps the brand hues.
   System follows prefers-color-scheme live (no data-theme attribute set);
   an explicit choice sets data-theme="light" or "dark" on <html>. */
@font-face { font-family: "Radar Selawik"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/radar-selawik-400.woff2") format("woff2"); }
@font-face { font-family: "Radar Selawik"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/radar-selawik-600.woff2") format("woff2"); }
@font-face { font-family: "Radar Selawik"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/radar-selawik-700.woff2") format("woff2"); }

/* lg-body (an Elementor snapshot page body) keeps the light set in both themes: a light "paper" panel. */
:root, lg-body {
  color-scheme: light;
  --font: "Radar Selawik", Arial, sans-serif;

  /* surfaces */
  --ground: #fcfaf7;
  --surface: #ffffff;
  --shell: #faf9f6;
  --mint: #edf4f3;
  --well-blog: #f2f1eb;
  --well-shop: #f5f4ed;
  --stone: rgba(100, 87, 66, 0.1);
  --ribbon: #e9e3d9;
  --hairline: rgba(95, 104, 110, 0.12);

  /* text */
  --ink: #20334a;
  --ink-alt: #18384a;
  --muted: #52646d;
  --on-brand: #ffffff;

  /* brand and links */
  --teal: #176e73;
  --teal-light: #267d80;
  --teal-deep: #124f55;
  --link: #176e73;
  --link-hover: #20334a;
  --eyebrow: #176e73;
  --focus: #b58040;

  /* lines and controls */
  --line: #dce3df;
  --line-strong: #b9c8c5;
  --pill-1: #176e73;
  --pill-2: #17696f;
  --pill-3: #12555c;
  --pill-hover: #1d7478;
  --soft-pill-bg: rgba(255, 255, 255, 0.7);
  --shadow: rgba(24, 56, 74, 0.05);
  --shadow-strong: rgba(10, 60, 64, 0.17);

  /* header and footer: navy is the same in both themes */
  --navy: #101b31;
  --navy-glow: #243553;
  --navy-mid: #1a2944;
  --rail: #204b55;
  --rail-hi: #24545c;
  --rail-lo: #1c444e;
  --foot-bottom: #12383f;
  --foot-glow: #20545b;
  --foot-mid: #173f47;
  --chrome-text: #ffffff;
  --chrome-line: rgba(199, 216, 238, 0.23);
  --chrome-fill: rgba(255, 255, 255, 0.055);

  /* package colours: colour, dark, and the tone used for TEXT on the page surface */
  --pk-core: #8a6f00; --pk-core-dark: #6d5700; --pk-core-text: #6d5700;
  --pk-essentials: #9e2b30; --pk-essentials-dark: #7d2226; --pk-essentials-text: #9e2b30;
  --pk-advanced: #b5532e; --pk-advanced-dark: #8f4224; --pk-advanced-text: #a0472a;
  --pk-optimum: #46602a; --pk-optimum-dark: #374c21; --pk-optimum-text: #3d5524;

  --portrait-ring: #7ab8d8;
  --sale-bg: #176e73;
  --scroll-track: #f1eee8;
  --scroll-thumb: #b6c1bf;

  /* floating WhatsApp pill (phones): today's colours */
  --chat-bg: #102d39;
  --chat-hover: #185248;
  --chat-line: #6fc7bf;
  --chat-icon: #88ddd0;
  --chat-shadow: rgba(16, 45, 57, 0.22);
}

/* DARK: surfaces darken, brand hues stay, links lift to a lighter teal for contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0e1822;
    --surface: #15222e;
    --shell: #111d28;
    --mint: #13242c;
    --well-blog: #1b2935;
    --well-shop: #1b2935;
    --stone: rgba(0, 0, 0, 0.28);
    --ribbon: #17232d;
    --hairline: rgba(160, 190, 200, 0.14);
    --ink: #e4ecf1;
    --ink-alt: #edf3f6;
    --muted: #a3b5bd;
    --link: #62c4c8;
    --link-hover: #ffffff;
    --eyebrow: #62c4c8;
    --focus: #d9a35c;
    --line: #2a3b48;
    --line-strong: #3b4f5c;
    --soft-pill-bg: rgba(255, 255, 255, 0.06);
    --shadow: rgba(0, 0, 0, 0.25);
    --shadow-strong: rgba(0, 0, 0, 0.45);
    --pk-core-text: #e0bf3d;
    --pk-essentials-text: #f08a8e;
    --pk-advanced-text: #f0996f;
    --pk-optimum-text: #9bc46b;
    --portrait-ring: #5aa3c4;
    --scroll-track: #111c26;
    --scroll-thumb: #3f5361;
  --chat-bg: #176e73;
  --chat-hover: #1d7f84;
  --chat-line: #62c4c8;
  --chat-icon: #c4f0ec;
  --chat-shadow: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e1822;
  --surface: #15222e;
  --shell: #111d28;
  --mint: #13242c;
  --well-blog: #1b2935;
  --well-shop: #1b2935;
  --stone: rgba(0, 0, 0, 0.28);
  --ribbon: #17232d;
  --hairline: rgba(160, 190, 200, 0.14);
  --ink: #e4ecf1;
  --ink-alt: #edf3f6;
  --muted: #a3b5bd;
  --link: #62c4c8;
  --link-hover: #ffffff;
  --eyebrow: #62c4c8;
  --focus: #d9a35c;
  --line: #2a3b48;
  --line-strong: #3b4f5c;
  --soft-pill-bg: rgba(255, 255, 255, 0.06);
  --shadow: rgba(0, 0, 0, 0.25);
  --shadow-strong: rgba(0, 0, 0, 0.45);
  --pk-core-text: #e0bf3d;
  --pk-essentials-text: #f08a8e;
  --pk-advanced-text: #f0996f;
  --pk-optimum-text: #9bc46b;
  --portrait-ring: #5aa3c4;
  --scroll-track: #111c26;
  --scroll-thumb: #3f5361;
  --chat-bg: #176e73;
  --chat-hover: #1d7f84;
  --chat-line: #62c4c8;
  --chat-icon: #c4f0ec;
  --chat-shadow: rgba(0, 0, 0, 0.5);
}