/* Oliminal design tokens — "Vellum & Moon"
   Source of truth: docs/visual-design/design_system.md
   Light = "Morning Mist"  ·  Dark = "Moonlit Pond" */
:root {
  /* Light — Morning Mist */
  --om-bg-from: #EFEAF7;
  --om-bg-to: #E3DDF1;
  --om-bg-glow: rgba(142, 124, 195, .22);
  --om-surface: #FFFFFF;
  --om-surface-tint: #F1ECF9;
  --om-surface-tint-border: rgba(142, 124, 195, .25);
  --om-ink: #2C2A38;
  --om-muted: #6D6785;
  --om-faint: #928CAB;
  --om-lilac: #8E7CC3;
  --om-lilac-hover: #5F4CA0;
  --om-lilac-tint: #F1ECF9;
  --om-track: #E4DDF1;
  --om-action: #D07E43;
  --om-action-hover: #B96C34;
  --om-on-action: #FFFFFF;
  --om-action-tint: #FBEFE4;
  --om-error: #C95B5B;
  --om-error-tint: #FDECEC;
  --om-line: rgba(44, 42, 56, .10);
  --om-hairline: rgba(44, 42, 56, .07);
  --om-icon-btn-bg: rgba(255, 255, 255, .65);
  --om-shadow-card: 0 6px 16px -8px rgba(76, 63, 120, .22);
  --om-shadow-card-hover: 0 14px 30px -12px rgba(76, 63, 120, .34);
  --om-shadow-fab: 0 12px 26px -8px rgba(208, 126, 67, .55);
  --om-scrim: rgba(21, 17, 43, .5);

  /* Type */
  --om-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --om-font-body: "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --om-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --om-tracking-label: .16em;

  /* Shape & space (4-based) */
  --om-r-card: 20px;
  --om-r-group: 18px;
  --om-r-inner: 14px;
  --om-r-chip: 10px;
  --om-r-pill: 999px;
  --om-gutter: 20px;
  --om-card-pad: 18px;
  --om-hit-min: 44px;

  color-scheme: light;
}

/* Explicit dark selection */
:root[data-theme="dark"] {
  --om-bg-from: #15112B;
  --om-bg-to: #211A40;
  --om-bg-glow: rgba(120, 102, 190, .3);
  --om-surface: #241D47;
  --om-surface-tint: rgba(188, 171, 232, .10);
  --om-surface-tint-border: rgba(188, 171, 232, .22);
  --om-ink: #ECE8F7;
  --om-muted: #A79FC4;
  --om-faint: #7D769C;
  --om-lilac: #BCABE8;
  --om-lilac-hover: #D6CBF2;
  --om-lilac-tint: rgba(188, 171, 232, .14);
  --om-track: rgba(255, 255, 255, .07);
  --om-action: #F0B46A;
  --om-action-hover: #F6C689;
  --om-on-action: #3A2412;   /* dark ink on filled marigold */
  --om-action-tint: rgba(240, 180, 106, .15);
  --om-error: #E58C8C;
  --om-error-tint: rgba(229, 140, 140, .14);
  --om-line: rgba(255, 255, 255, .10);
  --om-hairline: rgba(255, 255, 255, .06);
  --om-icon-btn-bg: rgba(255, 255, 255, .07);
  --om-shadow-card: none;    /* dark uses hairline borders, not shadows */
  --om-shadow-card-hover: none;
  --om-shadow-fab: 0 12px 26px -8px rgba(240, 180, 106, .4);
  --om-scrim: rgba(21, 17, 43, .6);

  color-scheme: dark;
}

/* Auto: follow the OS unless a theme is explicitly chosen (Moonlit Pond) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --om-bg-from: #15112B;
    --om-bg-to: #211A40;
    --om-bg-glow: rgba(120, 102, 190, .3);
    --om-surface: #241D47;
    --om-surface-tint: rgba(188, 171, 232, .10);
    --om-surface-tint-border: rgba(188, 171, 232, .22);
    --om-ink: #ECE8F7;
    --om-muted: #A79FC4;
    --om-faint: #7D769C;
    --om-lilac: #BCABE8;
    --om-lilac-hover: #D6CBF2;
    --om-lilac-tint: rgba(188, 171, 232, .14);
    --om-track: rgba(255, 255, 255, .07);
    --om-action: #F0B46A;
    --om-action-hover: #F6C689;
    --om-on-action: #3A2412;
    --om-action-tint: rgba(240, 180, 106, .15);
    --om-error: #E58C8C;
    --om-error-tint: rgba(229, 140, 140, .14);
    --om-line: rgba(255, 255, 255, .10);
    --om-hairline: rgba(255, 255, 255, .06);
    --om-icon-btn-bg: rgba(255, 255, 255, .07);
    --om-shadow-card: none;
    --om-shadow-card-hover: none;
    --om-shadow-fab: 0 12px 26px -8px rgba(240, 180, 106, .4);
    --om-scrim: rgba(21, 17, 43, .6);

    color-scheme: dark;
  }
}

/* Composed background: radial glow + 174° linear gradient, fixed on long pages. */
.om-bg {
  background:
    radial-gradient(480px 260px at 80% -6%, var(--om-bg-glow), transparent 60%),
    linear-gradient(174deg, var(--om-bg-from), var(--om-bg-to));
  background-attachment: fixed;
  color: var(--om-ink);
}