/* =====================================================================
   THEME — every look-and-feel value lives here.
   A reskin edits this file only; no feature code should hard-code colors.

   Two kinds of tokens:
   - semantic (--bg, --chrome, --accent, --surface, --ink …): what things ARE.
     Chrome and widgets use these.
   - palette (--orange, --purple …): window title-bar colors and fills.

   :root = Morning. [data-theme] blocks override for Afternoon and Night.
   Custom colors from appearance.cfg are applied on top as inline variables.
   ===================================================================== */
:root {
  color-scheme: light;

  /* semantic */
  --bg: #FFFFFF;            /* desktop */
  --grid-line: rgba(26, 23, 20, .07);
  --surface: #FFF6E6;       /* window bodies, panels */
  --field: #FFFFFF;         /* inputs, checkboxes, tracks */
  --ink: #1A1714;           /* text + outlines */
  --mute: #5E554C;
  --rule: #D9CDB8;
  --chrome: #F7C76A;        /* menubar + dock */
  --on-chrome: var(--ink);  /* text on bars; follows text color */
  --accent: #F28A3C;        /* buttons, today marker */
  --on-accent: var(--ink);
  --accent-2: #F7B26E;      /* selected nav, close button */
  --hover: #FCEBD0;
  --shadow-c: #1A1714;
  --shade: rgba(255, 255, 255, .7);
  --backdrop: rgba(26, 23, 20, .35);

  /* palette */
  --orange: #F28A3C;   --orange-deep: #E8613C;
  --orange-2: #F7B26E;
  --yellow: #F7C76A;   --yellow-deep: #F2B544;
  --purple: #C9B3EC;   --purple-deep: #B79BE6;  --purple-2: #DCCBF5;
  --green: #9ED3B6;    --green-deep: #7FC4A0;
  --peach: #F6A98A;    --peach-deep: #F08E6C;
  --blue: #B9D3F2;     --blue-deep: #94BCEB;

  /* habit garden */
  --grass: #BFE3C9; --grass-2: #9ED3B6; --soil: #E9CFA6; --soil-2: #D7B485; --fallow: #F3EAD8;
  --water: #B9D3F2; --ripple: #1E3A5F; --tile-line: rgba(26, 23, 20, .28); --heat: #3F9E6E;

  /* kept for older references */
  --paper: var(--surface);
  --white: var(--field);

  /* lines + shadows */
  --line: 2px;
  --outline: var(--ink);    /* border color; follows text color unless customised */
  --b: var(--line) solid var(--outline);
  --sh: 3px 3px 0 var(--shadow-c);
  --sh-lg: 8px 8px 0 var(--shadow-c);
  --sh-dlg: 6px 6px 0 var(--shadow-c);
  --grid-size: 24px;

  /* type */
  --mono: 'Space Mono', ui-monospace, monospace;
  --display: 'Bricolage Grotesque', sans-serif;
}

/* ===== Afternoon: warmer, softer, golden hour ===== */
:root[data-theme="afternoon"] {
  --bg: #FFF8EC;
  --grid-line: rgba(120, 70, 20, .08);
  --surface: #FCEFD8;
  --field: #FFFAF2;
  --ink: #2A1D14;
  --mute: #6E5A48;
  --rule: #E2CBA6;
  --chrome: #F4B860;
  --accent: #E8743A;
  --accent-2: #F2A65E;
  --hover: #F8E0B8;
  --shadow-c: #2A1D14;
  --shade: rgba(255, 248, 236, .7);

  --orange: #EC7F3A;   --orange-deep: #D9542F;
  --orange-2: #F2A65E;
  --yellow: #F2BD5A;   --yellow-deep: #E5A23A;
  --purple: #D3A9D8;   --purple-deep: #BE8CC6;  --purple-2: #EBD3EC;
  --green: #A9CF9A;    --green-deep: #8BBB7A;
  --peach: #F39C7E;    --peach-deep: #E57E5E;
  --blue: #C6CDE8;     --blue-deep: #A3AFD9;

  --grass: #C9E3B9; --grass-2: #A9CF9A; --soil: #EBC99A; --soil-2: #D9AE78; --fallow: #F6E8D0;
  --water: #C9D3EC; --ripple: #2A3A5C; --tile-line: rgba(42, 29, 20, .28); --heat: #4F9A5E;
}

/* ===== Night: dark moonlight ===== */
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #12141F;
  --grid-line: rgba(230, 225, 245, .05);
  --surface: #1E2233;
  --field: #161927;
  --ink: #E6E1F5;
  --outline: #05060B;       /* black borders at night (Mo: light ones glare); text stays light */
  --mute: #A39DB8;
  --rule: #3A3F58;
  --chrome: #262B45;
  --accent: #6A58A8;
  --on-accent: #F3F0FB;
  --accent-2: #3E3768;
  --hover: #2A2F4A;
  --shadow-c: #05060B;
  --shade: rgba(18, 20, 31, .75);
  --backdrop: rgba(5, 6, 11, .6);

  --orange: #B8693A;   --orange-deep: #8A4A2C;
  --orange-2: #9C6B45;
  --yellow: #A88A3E;   --yellow-deep: #7D6630;
  --purple: #6D5C9E;   --purple-deep: #54467E;  --purple-2: #3A3360;
  --green: #3F7A62;    --green-deep: #2E5C4A;
  --peach: #A0604F;    --peach-deep: #7A463A;
  --blue: #4A6A96;     --blue-deep: #36507A;

  --grass: #2F5446; --grass-2: #3F7A62; --soil: #4A3B30; --soil-2: #382C24; --fallow: #232838;
  --water: #162036; --ripple: #6F86B8; --tile-line: rgba(230, 225, 245, .1); --heat: #6FC79A;
}

/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; }
body {
  font-family: var(--mono);
  color: var(--ink);
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  transition: background-color .4s, color .4s;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* screen-reader only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* retro square scrollbars */
* { scrollbar-color: var(--accent) var(--surface); }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--surface); border: var(--b); }
::-webkit-scrollbar-thumb { background: var(--accent-2); border: var(--b); }

/* doodle illustrations keep their own colors; at night, dim them a touch */
:root[data-theme="night"] .doodle { filter: brightness(.82) saturate(.85); }

/* ===== shared bits widgets can use ===== */
.mut { color: var(--mute); font-size: 14px; }
.press { transition: transform .08s, box-shadow .08s; }
.press:hover { box-shadow: var(--sh); }
.press:active { transform: translate(2px, 2px); box-shadow: none; }
.btn {
  background: var(--accent); color: var(--on-accent); border: var(--b); height: 44px; padding: 0 24px;
  font-weight: 700; font-size: 16px; display: inline-flex; align-items: center;
  gap: 12px; justify-content: center;
}
.btn.ink { background: var(--ink); color: var(--surface); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.vsep { width: var(--line); align-self: stretch; background: currentColor; margin: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}