/* ==========================================================================
   Meridian design tokens — Framed Light (Parchment) + Midnight Journal dark
   Layered over Bulma 1.x by overriding its CSS variables.
   ========================================================================== */

:root {
  /* --- Meridian palette (Framed Light Mode) --- */
  --meridian-gutter: #363636;
  --meridian-bg: #fdfcf8;
  --meridian-accent: #1b3022;
  --meridian-text-main: #2d2d2d;
  --meridian-text-muted: #67726a; /* AA on parchment (~4.9:1) */
  --meridian-divider: #e8e4d9;
  --meridian-alert: #a04b33; /* muted brick — warm enough for parchment */

  /* --- Vector swatches (shared across themes) --- */
  --vector-1: #d4a293; /* Dusty Rose  — Self Care */
  --vector-2: #a8b39b; /* Sage        — Health */
  --vector-3: #d1ac6d; /* Ochre       — Social */
  --vector-4: #8095b0; /* Slate Blue  — Growth */
  --vector-5: #b08fa2; /* Mauve */
  --vector-6: #7fa8a0; /* Teal Grey */
  --vector-7: #c2917b; /* Terracotta */
  --vector-8: #93a1c4; /* Periwinkle */

  /* --- Typography --- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "DM Sans", -apple-system, sans-serif;

  /* --- Motion --- */
  --transition-smooth: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  /* --- Bulma overrides: parchment scheme --- */
  --bulma-family-primary: var(--font-ui);
  --bulma-scheme-h: 48;
  --bulma-scheme-s: 36%;
  --bulma-scheme-main-l: 98%;
  --bulma-scheme-main: var(--meridian-bg);
  --bulma-body-background-color: var(--meridian-gutter);
  --bulma-text: var(--meridian-text-main);
  --bulma-text-strong: var(--meridian-text-main);
  --bulma-body-color: var(--meridian-text-main);
  /* primary/link = deep forest green: hsl(140, 28%, 15%) */
  --bulma-primary-h: 140;
  --bulma-primary-s: 28%;
  --bulma-primary-l: 15%;
  --bulma-primary: var(--meridian-accent);
  --bulma-primary-invert-l: 96%;
  --bulma-link-h: 140;
  --bulma-link-s: 28%;
  --bulma-link-l: 22%;
  --bulma-link-text: var(--meridian-accent);
  --bulma-border: var(--meridian-divider);
  --bulma-border-weak: var(--meridian-divider);
  --bulma-radius: 4px;
  --bulma-radius-large: 6px;
  --bulma-title-family: var(--font-display);
  --bulma-title-weight: 600;
  --bulma-subtitle-family: var(--font-display);
  --bulma-strong-weight: 500;
}

/* --- Midnight Journal dark mode --------------------------------------- */
[data-theme="dark"] {
  --meridian-gutter: #1a1a1a;
  --meridian-bg: #161b17;
  --meridian-accent: #f5f2ea;
  --meridian-text-main: #f5f2ea;
  --meridian-text-muted: #828d85; /* AA on midnight bg (~4.8:1) */
  --meridian-divider: #303a31;
  --meridian-alert: #d28d79;
  --toggle-glow: #c4d1c6;

  --bulma-scheme-h: 132;
  --bulma-scheme-s: 10%;
  --bulma-scheme-main-l: 10%;
  --bulma-scheme-main: var(--meridian-bg);
  --bulma-body-background-color: var(--meridian-gutter);
  --bulma-text: var(--meridian-text-main);
  --bulma-text-strong: var(--meridian-text-main);
  --bulma-body-color: var(--meridian-text-main);
  --bulma-primary-h: 44;
  --bulma-primary-s: 35%;
  --bulma-primary-l: 94%;
  --bulma-primary: var(--meridian-accent);
  --bulma-primary-invert-l: 12%;
  --bulma-link-h: 132;
  --bulma-link-s: 25%;
  --bulma-link-l: 80%;
  --bulma-link-text: var(--meridian-accent);
  --bulma-border: var(--meridian-divider);
  --bulma-border-weak: var(--meridian-divider);
}

/* System preference: dark unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --meridian-gutter: #1a1a1a;
    --meridian-bg: #161b17;
    --meridian-accent: #f5f2ea;
    --meridian-text-main: #f5f2ea;
    --meridian-text-muted: #6e7a70;
    --meridian-divider: #303a31;
    --meridian-alert: #d28d79;
    --toggle-glow: #c4d1c6;

    --bulma-scheme-h: 132;
    --bulma-scheme-s: 10%;
    --bulma-scheme-main-l: 10%;
    --bulma-scheme-main: var(--meridian-bg);
    --bulma-body-background-color: var(--meridian-gutter);
    --bulma-text: var(--meridian-text-main);
    --bulma-text-strong: var(--meridian-text-main);
    --bulma-body-color: var(--meridian-text-main);
    --bulma-primary-h: 44;
    --bulma-primary-s: 35%;
    --bulma-primary-l: 94%;
    --bulma-primary: var(--meridian-accent);
    --bulma-primary-invert-l: 12%;
    --bulma-link-h: 132;
    --bulma-link-s: 25%;
    --bulma-link-l: 80%;
    --bulma-link-text: var(--meridian-accent);
    --bulma-border: var(--meridian-divider);
    --bulma-border-weak: var(--meridian-divider);
  }
}