/* theme.css — tokens only. No component styles below this file. */

:root {
  /* Paper & ink -------------------------------------------------- */
  --paper:      #E9EDEC;   /* cool recycled paper, not cream */
  --card:       #FBFCFB;
  --card-sunk:  #E2E7E6;
  --ink:        #17212B;
  --ink-soft:   #5A6672;
  --ink-faint:  #97A2AA;
  --rule:       rgba(23, 33, 43, .10);
  --rule-firm:  rgba(23, 33, 43, .18);

  /* Turmeric. Reserved for completion. Nothing else may use it.
     One accent used in exactly one place stays meaningful; an accent
     sprayed across every control becomes wallpaper. */
  --done:       #E0A526;
  --done-deep:  #9E7013;

  /* Teal — focus, active list, structural emphasis. */
  --teal:       #146B62;
  --teal-soft:  rgba(20, 107, 98, .12);

  --danger:     #A33A2E;

  /* List colours. Six is enough to tell lists apart at a glance;
     more and the dots stop being distinguishable. Turmeric is
     deliberately absent — it means "done" and nothing else. */
  --list-slate:  #5A6672;
  --list-teal:   #146B62;
  --list-indigo: #3B4E8C;
  --list-plum:   #7A3B6B;
  --list-moss:   #4A6B2F;
  --list-berry:  #9B2F4A;


  /* Type ---------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Roboto", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Roboto Mono", Menlo, monospace;

  --t-display: clamp(27px, 7.5vw, 33px);
  --t-title:   17px;
  --t-body:    15px;
  --t-meta:    13px;
  --t-micro:   11px;

  /* Space --------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px;

  --r-card: 14px;
  --r-pill: 999px;

  /* Motion -------------------------------------------------------- */
  --stroke: 260ms;                       /* the completion line */
  --settle: 420ms;                       /* delay before a done row moves */
  --ease: cubic-bezier(.22, .61, .36, 1);

  --shadow-sheet: 0 -1px 0 var(--rule), 0 -12px 28px rgba(23, 33, 43, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #12171C;
    --card:      #1A2128;
    --card-sunk: #232B33;
    --ink:       #E4E9EC;
    --ink-soft:  #97A4AE;
    --ink-faint: #63707A;
    --rule:      rgba(228, 233, 236, .11);
    --rule-firm: rgba(228, 233, 236, .20);

    --done:      #E8B547;
    --done-deep: #E8B547;

    --teal:      #4FB3A5;
    --teal-soft: rgba(79, 179, 165, .15);

    --danger:    #E0796A;

    --list-slate:  #8D99A4;
    --list-teal:   #4FB3A5;
    --list-indigo: #8199D8;
    --list-plum:   #C283B0;
    --list-moss:   #93B96B;
    --list-berry:  #E0798F;


    --shadow-sheet: 0 -1px 0 var(--rule), 0 -12px 28px rgba(0, 0, 0, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --stroke: 1ms; --settle: 1ms; }
}