/* =============================================================
   3AM THOUGHTS — design tokens
   Swap the four brand hexes below and the whole site follows.
   ============================================================= */

:root {
  /* ---- brand palette ---------------------------------------- */
  --oat:      #E2D8CB;   /* Oat Silk        — ground              */
  --mulberry: #56061D;   /* Mulberry Kiss   — signal / accent     */
  --reverie:  #507593;   /* Blue Reverie    — secondary / denim    */
  --custard:  #022E4A;   /* Midnight Custard— ink / dark surfaces  */

  /* ---- derived surface + ink roles -------------------------- */
  --ground:      var(--oat);
  --ground-2:    #EDE6DC;
  --ground-sunk: #D6C9B8;
  --ink:         var(--custard);
  --ink-soft:    color-mix(in srgb, var(--custard) 72%, var(--oat));
  --ink-faint:   color-mix(in srgb, var(--custard) 58%, var(--oat));
  --rule:        color-mix(in srgb, var(--custard) 22%, var(--oat));
  --rule-strong: color-mix(in srgb, var(--custard) 45%, var(--oat));
  --signal:      var(--mulberry);
  --signal-ink:  var(--oat);
  --accent:      var(--reverie);

  /* ---- type ------------------------------------------------- */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-text:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif:   "Bodoni Moda", Georgia, "Times New Roman", serif;
  --f-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid display scale */
  --t-mega:  clamp(3.6rem, 15.5vw, 17rem);
  --t-xxl:   clamp(2.6rem, 7.6vw,  7.5rem);
  --t-xl:    clamp(2rem,   4.6vw,  4.2rem);
  --t-lg:    clamp(1.5rem, 2.6vw,  2.4rem);
  --t-md:    clamp(1.05rem,1.4vw,  1.35rem);
  --t-body:  clamp(0.95rem,1.05vw, 1.05rem);
  --t-micro: 0.6875rem;

  /* ---- space + rhythm --------------------------------------- */
  --gutter:  clamp(1rem, 3.2vw, 2.5rem);
  --sec:     clamp(4.5rem, 11vw, 11rem);
  --sec-sm:  clamp(3rem, 6vw, 6rem);
  --nav-h:   64px;

  /* ---- motion ----------------------------------------------- */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .55s;
  --dur-fast:  .28s;
}

/* Dark surfaces flip the ink/ground roles without new components. */
.on-dark {
  --ground:      var(--custard);
  --ground-2:    color-mix(in srgb, var(--custard) 88%, black);
  --ground-sunk: color-mix(in srgb, var(--custard) 80%, black);
  --ink:         var(--oat);
  --ink-soft:    color-mix(in srgb, var(--oat) 80%, var(--custard));
  --ink-faint:   color-mix(in srgb, var(--oat) 55%, var(--custard));
  --rule:        color-mix(in srgb, var(--oat) 22%, var(--custard));
  --rule-strong: color-mix(in srgb, var(--oat) 45%, var(--custard));
  --signal:      var(--oat);
  --signal-ink:  var(--custard);
  --accent:      color-mix(in srgb, var(--reverie) 80%, white);
  background: var(--ground);
  color: var(--ink);
}

.on-wine {
  --ground:      var(--mulberry);
  --ground-2:    color-mix(in srgb, var(--mulberry) 88%, black);
  --ground-sunk: color-mix(in srgb, var(--mulberry) 78%, black);
  --ink:         var(--oat);
  --ink-soft:    color-mix(in srgb, var(--oat) 80%, var(--mulberry));
  --ink-faint:   color-mix(in srgb, var(--oat) 55%, var(--mulberry));
  --rule:        color-mix(in srgb, var(--oat) 24%, var(--mulberry));
  --rule-strong: color-mix(in srgb, var(--oat) 46%, var(--mulberry));
  --signal:      var(--oat);
  --signal-ink:  var(--mulberry);
  --accent:      color-mix(in srgb, var(--reverie) 70%, white);
  background: var(--ground);
  color: var(--ink);
}

.on-denim {
  --ground:      color-mix(in srgb, var(--reverie) 65%, var(--oat));
  --ground-2:    color-mix(in srgb, var(--reverie) 78%, var(--oat));
  --ground-sunk: color-mix(in srgb, var(--reverie) 85%, var(--oat));
  --ink:         var(--custard);
  --ink-soft:    var(--custard);
  --ink-faint:   color-mix(in srgb, var(--custard) 62%, var(--reverie));
  --rule:        color-mix(in srgb, var(--custard) 28%, transparent);
  --rule-strong: color-mix(in srgb, var(--custard) 52%, transparent);
  --signal:      var(--mulberry);
  --signal-ink:  var(--oat);
  --accent:      var(--custard);
  background: var(--ground);
  color: var(--ink);
}