/* Memduka design tokens — v1.0, September 2026
   Import this before any component CSS. Light is the bare :root;
   dark is redefined twice so both the OS setting and an explicit
   toggle resolve correctly. Never define a colour only inside a
   media or [data-theme] block. */

:root {
  /* --- raw palette --- */
  --mk-ink:       #14161F; /* ground. evening. */
  --mk-dusk:      #2B3145; /* raised surface on ink */
  --mk-haze:      #5E6579; /* muted text, biased toward ink */
  --mk-rule:      #D9DCE4;
  --mk-paper:     #FBFAF8;
  --mk-lamp:      #C97F14; /* accent on light grounds: marks, fills, borders — not text */
  --mk-lamp-deep: #9C6009; /* accent as TEXT on light grounds (lamp is 3.08:1 on paper) */
  --mk-lamp-lift: #E9A13B; /* accent on dark grounds, text and fill alike */
  --mk-verdigris: #3F7F76; /* semantic: retained — fills and borders */
  --mk-verdigris-deep: #3A776E; /* retained as TEXT on light grounds (plain is 4.47:1) */
  --mk-clay:      #B0522F; /* semantic: gap (never red). Passes as text at 5.13:1 */

  /* --- semantic roles (light) --- */
  --bg:         var(--mk-paper);
  --bg-raised:  #FFFFFF;
  --bg-deep:    var(--mk-ink);
  --fg:         var(--mk-ink);
  --fg-muted:   var(--mk-haze);
  --fg-on-deep: #E7E9EF;
  --line:       var(--mk-rule);
  --accent:      var(--mk-lamp);
  /* Text roles are separate on light grounds only — see "Colour on a light ground" in
     BRAND.md. Use --accent for a mark, a fill or a border; --accent-text for anything
     read. On dark both resolve to lamp-lift. */
  --accent-text: var(--mk-lamp-deep);
  --retained:      var(--mk-verdigris);
  --retained-text: var(--mk-verdigris-deep);
  --gap:         var(--mk-clay);
  --gap-text:    var(--mk-clay);
  /* Text on a lamp fill. White is 3.22:1 and fails; ink is 5.61:1. */
  --on-accent:   var(--mk-ink);

  /* --- type --- */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0F111A;
    --bg-raised:  #181B27;
    --bg-deep:    #0A0C13;
    --fg:         #E7E9EF;
    --fg-muted:   #949BB0;
    --fg-on-deep: #E7E9EF;
    --line:       #2A2F3E;
    --accent:      var(--mk-lamp-lift);
    --accent-text: var(--mk-lamp-lift);
    --retained:      #5BA69B;
    --retained-text: #5BA69B;
    --gap:         #D4795A;
    --gap-text:    #D4795A;
    /* Lamp-lift is bright enough that ink still wins on it. */
    --on-accent:   var(--mk-ink);
  }
}

:root[data-theme="dark"] {
  --bg:         #0F111A;
  --bg-raised:  #181B27;
  --bg-deep:    #0A0C13;
  --fg:         #E7E9EF;
  --fg-muted:   #949BB0;
  --fg-on-deep: #E7E9EF;
  --line:       #2A2F3E;
  --accent:      var(--mk-lamp-lift);
  --accent-text: var(--mk-lamp-lift);
  --retained:      #5BA69B;
  --retained-text: #5BA69B;
  --gap:         #D4795A;
  --gap-text:    #D4795A;
  --on-accent:   var(--mk-ink);
}

body { background: var(--bg); color: var(--fg); font-family: var(--body); }