/* ============================================================
 * Studiable · Mosaic Tokens · v1.0
 * Marginalia Studio, May 2026
 *
 * Drop these custom properties into your :root.
 * Replace any reference to the old --accent / lime green
 * with --color-subject (or one of the five accent families).
 * ============================================================ */

:root {
  /* ---------- Surface ---------- */
  --color-cream:        #f4eedf;   /* canvas              · oklch(0.94 0.020 85)  */
  --color-cream-2:      #ede5d2;   /* raised              · oklch(0.91 0.022 85)  */
  --color-cream-3:      #e3d9c0;   /* sunken              · oklch(0.87 0.024 85)  */
  --color-ink:          #221f1a;   /* primary text        · oklch(0.20 0.010 65)  */
  --color-ink-2:        #3a3429;   /* secondary text                              */
  --color-mid:          #7a7263;   /* muted                                       */
  --color-soft:         #a9a08c;   /* hint                                        */
  --color-rule:         #d8cfb9;   /* hairline                                    */
  --color-rule-soft:    #e6dec9;

  /* ---------- Mosaic — base · deep · wash ---------- */
  --color-clay:         #c47553;   --color-clay-deep:  #8e4d2e;   --color-clay-wash:  rgba(196,117,83,.16);
  --color-sage:         #7b9876;   --color-sage-deep:  #4f6a4a;   --color-sage-wash:  rgba(123,152,118,.18);
  --color-peri:         #8190c4;   --color-peri-deep:  #4f5d8f;   --color-peri-wash:  rgba(129,144,196,.20);
  --color-must:         #cba24a;   --color-must-deep:  #8b6a14;   --color-must-wash:  rgba(203,162,74,.22);
  --color-plum:         #8a4b6d;   --color-plum-deep:  #5e2f4a;   --color-plum-wash:  rgba(138,75,109,.18);

  /* ---------- Semantic ---------- */
  --color-success:      var(--color-sage-deep);   /* mastery is always sage */
  --color-warning:      var(--color-must-deep);   /* reviews due is mustard */
  --color-error:        #a23c2e;                  /* warm rust — system errors only */

  /* ---------- Active subject ----------
   * Set per-page from a data attribute on <main> or <section>.
   * Defaults to Clay. */
  --color-subject:      var(--color-clay);
  --color-subject-deep: var(--color-clay-deep);
  --color-subject-wash: var(--color-clay-wash);

  /* ---------- Typography ---------- */
  --font-display:       "Instrument Serif", Georgia, serif;
  --font-serif:         "Newsreader", Georgia, serif;
  --font-ui:            "Manrope", system-ui, sans-serif;
  --font-hand:          "Caveat", cursive;
  --font-mono:          "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --fs-display-1:       96px;     --lh-display-1: 0.95;
  --fs-display-2:       56px;     --lh-display-2: 0.98;
  --fs-h1:              36px;     --lh-h1:        1.10;
  --fs-h2:              24px;     --lh-h2:        1.20;
  --fs-body-l:          20px;     --lh-body-l:    1.50;
  --fs-body:            16px;     --lh-body:      1.55;
  --fs-small:           14px;     --lh-small:     1.50;
  --fs-label:           11px;     --lh-label:     1.60;

  /* ---------- Spacing — 8pt-rooted ---------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;

  /* ---------- Radii ---------- */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          22px;
  --radius-pill:        100px;

  /* ---------- Motion ---------- */
  --motion-base:        180ms cubic-bezier(.2,.6,.2,1);
  --motion-quick:       120ms cubic-bezier(.2,.6,.2,1);
  --motion-slow:        320ms cubic-bezier(.2,.6,.2,1);
}

/* ============================================================
 * Subject-scoped pages
 * Set data-subject on the <main> or section that owns
 * one subject. The CTAs, progress bars, breadcrumbs etc.
 * will adopt that subject's accent automatically.
 * ============================================================ */

[data-subject="clay"]  { --color-subject: var(--color-clay);  --color-subject-deep: var(--color-clay-deep);  --color-subject-wash: var(--color-clay-wash); }
[data-subject="sage"]  { --color-subject: var(--color-sage);  --color-subject-deep: var(--color-sage-deep);  --color-subject-wash: var(--color-sage-wash); }
[data-subject="peri"]  { --color-subject: var(--color-peri);  --color-subject-deep: var(--color-peri-deep);  --color-subject-wash: var(--color-peri-wash); }
[data-subject="must"]  { --color-subject: var(--color-must);  --color-subject-deep: var(--color-must-deep);  --color-subject-wash: var(--color-must-wash); }
[data-subject="plum"]  { --color-subject: var(--color-plum);  --color-subject-deep: var(--color-plum-deep);  --color-subject-wash: var(--color-plum-wash); }

/* ============================================================
 * Dark mode — "late library"
 * Apply with .theme-dark on <html> or <body>.
 * ============================================================ */

.theme-dark {
  --color-cream:        #1c1814;
  --color-cream-2:      #252119;
  --color-cream-3:      #2e2920;
  --color-ink:          #f1eadb;
  --color-ink-2:        #d2c8b0;
  --color-mid:          #a9a08c;
  --color-soft:         #7a7263;
  --color-rule:         #3a342a;
  --color-rule-soft:    #2e2920;

  --color-clay:         #d9876a;   --color-clay-deep:  #e9a085;
  --color-sage:         #94b48f;   --color-sage-deep:  #a8c8a3;
  --color-peri:         #9aa8d3;   --color-peri-deep:  #b5c1e0;
  --color-must:         #dfb968;   --color-must-deep:  #ecca87;
  --color-plum:         #a5688a;   --color-plum-deep:  #bd84a3;
}

/* ============================================================
 * Accessibility — motion is off by default for the sensitive
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-base:  0ms linear;
    --motion-quick: 0ms linear;
    --motion-slow:  0ms linear;
  }
}