/*
  SML Parser: semantic theme tokens, day and night.
  Day values alias the szmigieldesign design system tokens, so day mode stays tied to the brand.
  Night values are new: a dark ground with a restrained plum tint, soft lavender for the "good" end of data scales, and a softened orange accent.
  Switch themes with data-theme="dark" on <html> (or any wrapper). Day is the default.
*/

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: var(--sand);               /* page */
  --surface: var(--white);         /* cards, bars, controls */
  --surface-2: #F4F0E8;            /* tinted fills: code, selected toggles, tags */
  --row-hover: var(--sand);        /* hover on list rows and accordion headers */
  --overlay: rgba(255, 255, 255, 0.85); /* labels laid over the map */

  /* Lines */
  --line: var(--gray-border);      /* dividers, card borders */
  --line-strong: var(--gray-666);  /* control borders */

  /* Text */
  --fg: var(--ink);                /* body */
  --fg-2: #444444;                 /* secondary body */
  --fg-muted: var(--gray-666);     /* captions, labels */
  --fg-heading: var(--plum);       /* headings, eyebrows, logo text */
  --fg-link: var(--plum);          /* links (hover is always orange) */
  --on-accent: #111111;            /* text on orange */

  /* Brand structure */
  --brand: var(--plum);            /* card borders, scrollbar thumb, focus-adjacent rings */
  --accent: var(--orange);         /* CTA, hover, highlights */
  --accent-text: var(--orange);    /* link hover */
  --focus: var(--accent-text);     /* focus ring */
  --underline: rgba(238, 113, 0, 0.75);

  /* Interactive states */
  --sel-bg: var(--plum);           /* selected chip, segment, switch */
  --sel-fg: #FFFFFF;
  --sel-border: var(--plum);
  --hover-bg: var(--ink);          /* hover inverts the control */
  --hover-fg: #FFFFFF;

  /* Effects */
  --card-shadow: 4px 4px 0 0 var(--plum);
  --note-bg: #FFF1E3;              /* tinted callout */
  --switch-off: #8C8C8C;

  /* Code */
  --pre-bg: #111111;
  --pre-fg: #F4F0E8;

  /* Map */
  --map-ground: #F1EDE6;
  --map-dots: rgba(62, 36, 86, 0.14);

  /* Data series. Orange is the "bad" end in both themes. */
  --series-1: var(--plum);         /* GNSS altitude, EVPE, good end of the EHPE ramp */
  --series-mid: #874432;           /* 5 to 8 m */
  --series-bad: var(--accent-text); /* 8 m or more */
  --series-baro: #666666;          /* barometric altitude */
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Softer orange: the brand #EE7100 glares on a dark ground */
  --orange: #EA8734;

  /* Surfaces */
  --bg: #150F1B;
  --surface: #241B2E;
  --surface-2: #30263D;
  --row-hover: #30263D;
  --overlay: rgba(21, 15, 27, 0.88);

  /* Lines */
  --line: #4E4260;
  --line-strong: #8C7FA0;

  /* Text */
  --fg: #FAF8FC;
  --fg-2: #E0DAE8;
  --fg-muted: #C4BCD0;
  --fg-heading: #F8F4FC;
  --fg-link: #D6C2F0;
  --on-accent: #111111;

  /* Brand structure */
  --brand: #A68FC4;
  --accent: var(--orange);
  --accent-text: var(--orange);
  --focus: var(--accent-text);
  --underline: rgba(234, 135, 52, 0.55);

  /* Interactive states */
  --sel-bg: #8060A0;
  --sel-fg: #FFFFFF;
  --sel-border: #B29BD0;
  --hover-bg: #FAF8FC;
  --hover-fg: #150F1B;

  /* Effects */
  --card-shadow: 4px 4px 0 0 #65497F;
  --note-bg: rgba(234, 135, 52, 0.14);
  --switch-off: #857A98;

  /* Code */
  --pre-bg: #0D0911;
  --pre-fg: #FAF8FC;

  /* Map */
  --map-ground: #1B1423;
  --map-dots: rgba(255, 255, 255, 0.07);

  /* Data series */
  --series-1: #CDBDEA;
  --series-mid: #D9A79E;
  --series-bad: var(--accent-text);
  --series-baro: #E8E3EE;
}