/* ==========================================================================
   LUMEN — design tokens
   One accent: dusty blue. Warm ivory ground. Deep, warm charcoal ink.
   Every colour, type step, rhythm value and motion timing lives here.
   ========================================================================== */

:root {
  /* --- Type ------------------------------------------------------------ */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua",
                "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "Inter", Arial, sans-serif;

  /* Fluid steps — small screens first, gently larger on wide viewports */
  --t-micro: 0.6875rem;                               /* 11px  eyebrow / meta */
  --t-small: 0.8125rem;                               /* 13px  interface      */
  --t-body: clamp(1.0rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-read: clamp(1.0625rem, 1.0rem + 0.4vw, 1.1875rem); /* long-form reading */
  --t-lead: clamp(1.125rem, 1.04rem + 0.5vw, 1.375rem);  /* invitations       */
  --t-title: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --t-display: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);

  --lh-tight: 1.18;
  --lh-snug: 1.4;
  --lh-body: 1.62;
  --lh-write: 1.78;                                   /* the editor           */

  --ls-eyebrow: 0.16em;
  --ls-wordmark: 0.34em;

  /* --- Rhythm ----------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* One column width for every screen, so the left margin never shifts
     as you move between Today, the Journal and Reflections. */
  --measure: 36rem;
  --gutter: clamp(1.375rem, 5vw, 3rem);

  --radius: 3px;             /* almost none, on purpose  */

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* --- Light: warm ivory ------------------------------------------------ */
  --bg: #faf7f1;
  --bg-raise: #fffdf8;
  --bg-sunk: #f4efe6;
  --ink: #2b2a26;
  --ink-soft: #5b564c;
  --ink-faint: #716c62;
  /* Decorative only — separators, empty calendar days, progress dots. Never
     put text in this: it does not meet the 4.5:1 contrast minimum, and it is
     not meant to. Text stops at --ink-faint. */
  --ink-ghost: #b3ab9c;
  --rule: rgba(43, 42, 38, 0.11);
  --rule-strong: rgba(43, 42, 38, 0.2);
  --accent: #4e6b84;
  --accent-deep: #3d5568;
  --accent-soft: #7b95aa;
  --accent-wash: rgba(78, 107, 132, 0.09);
  --accent-ink: #fdfbf7;
  --btn-bg: #4e6b84;
  --btn-bg-hover: #3d5568;
  --btn-ink: #fdfbf7;
  --shadow: 0 1px 2px rgba(43, 42, 38, 0.04), 0 8px 24px -18px rgba(43, 42, 38, 0.35);
  --selection: rgba(78, 107, 132, 0.16);
  --grain-opacity: 0.24;
  --wash-opacity: 1;
}

/* --- Dark: writing at night, not an inverted theme ----------------------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"],
:root[data-theme="auto"] {
  --dark-bg: #191713;
  --dark-bg-raise: #201d18;
  --dark-bg-sunk: #141210;
  --dark-ink: #e9e2d4;
  --dark-ink-soft: #b2aa9a;
  --dark-ink-faint: #918a7d;
  --dark-ink-ghost: #5f584e;
  --dark-rule: rgba(233, 226, 212, 0.13);
  --dark-rule-strong: rgba(233, 226, 212, 0.24);
  --dark-accent: #93aec4;
  --dark-accent-deep: #b0c6d8;
  --dark-accent-soft: #6e8699;
  --dark-accent-wash: rgba(147, 174, 196, 0.11);
  --dark-accent-ink: #171511;
  /* At night a bright block of accent shouts. The button recedes instead. */
  --dark-btn-bg: #2f3f4c;
  --dark-btn-bg-hover: #3b4f5f;
  --dark-btn-ink: #e4ecf3;
  --dark-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -20px rgba(0, 0, 0, 0.9);
  --dark-selection: rgba(147, 174, 196, 0.22);
}

:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --bg-raise: var(--dark-bg-raise);
  --bg-sunk: var(--dark-bg-sunk);
  --ink: var(--dark-ink);
  --ink-soft: var(--dark-ink-soft);
  --ink-faint: var(--dark-ink-faint);
  --ink-ghost: var(--dark-ink-ghost);
  --rule: var(--dark-rule);
  --rule-strong: var(--dark-rule-strong);
  --accent: var(--dark-accent);
  --accent-deep: var(--dark-accent-deep);
  --accent-soft: var(--dark-accent-soft);
  --accent-wash: var(--dark-accent-wash);
  --accent-ink: var(--dark-accent-ink);
  --shadow: var(--dark-shadow);
  --selection: var(--dark-selection);
  --btn-bg: var(--dark-btn-bg);
  --btn-bg-hover: var(--dark-btn-bg-hover);
  --btn-ink: var(--dark-btn-ink);
  --grain-opacity: 0.22;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: var(--dark-bg);
    --bg-raise: var(--dark-bg-raise);
    --bg-sunk: var(--dark-bg-sunk);
    --ink: var(--dark-ink);
    --ink-soft: var(--dark-ink-soft);
    --ink-faint: var(--dark-ink-faint);
    --ink-ghost: var(--dark-ink-ghost);
    --rule: var(--dark-rule);
    --rule-strong: var(--dark-rule-strong);
    --accent: var(--dark-accent);
    --accent-deep: var(--dark-accent-deep);
    --accent-soft: var(--dark-accent-soft);
    --accent-wash: var(--dark-accent-wash);
    --accent-ink: var(--dark-accent-ink);
    --shadow: var(--dark-shadow);
    --selection: var(--dark-selection);
    --btn-bg: var(--dark-btn-bg);
    --btn-bg-hover: var(--dark-btn-bg-hover);
    --btn-ink: var(--dark-btn-ink);
    --grain-opacity: 0.22;
  }
}

/* --- Time of day: a breath of warmth, nothing more ----------------------- */
:root[data-tod="dawn"]  { --wash-a: rgba(214, 186, 150, 0.13); --wash-b: rgba(158, 178, 196, 0.07); }
:root[data-tod="day"]   { --wash-a: rgba(255, 252, 244, 0.50); --wash-b: rgba(198, 204, 208, 0.05); }
:root[data-tod="dusk"]  { --wash-a: rgba(206, 164, 128, 0.14); --wash-b: rgba(128, 136, 158, 0.07); }
:root[data-tod="night"] { --wash-a: rgba(178, 158, 134, 0.12); --wash-b: rgba(96, 104, 128, 0.08); }