/* ─────────────────────────────────────────────────────────
   맘초헬스 트래커 — Design tokens
   ───────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* Type */
  --mh-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --mh-font-num: 'Pretendard', -apple-system, ui-rounded, system-ui, sans-serif;

  /* Spacing — 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --mh-s-1: 4px;
  --mh-s-2: 8px;
  --mh-s-3: 12px;
  --mh-s-4: 16px;
  --mh-s-6: 24px;
  --mh-s-8: 32px;
  --mh-s-12: 48px;

  /* Radii */
  --mh-r-sm: 10px;
  --mh-r-md: 16px;
  --mh-r-lg: 22px;
  --mh-r-pill: 999px;

  /* LIGHT — warm apricot/cream */
  --mh-bg: #F6F0E8;             /* warm cream backdrop */
  --mh-bg-sub: #EFE7DC;         /* recessed strip */
  --mh-surface: #FFFFFF;
  --mh-surface-2: #FBF6EF;
  --mh-line: rgba(54, 38, 24, 0.08);
  --mh-line-strong: rgba(54, 38, 24, 0.14);

  --mh-fg: #2A2118;             /* primary text — warm near-black */
  --mh-fg-2: #5C4F40;           /* secondary */
  --mh-fg-3: #8A7E6E;           /* muted */
  --mh-fg-4: #B6A998;           /* very muted */

  --mh-accent: #D87554;         /* muted apricot — primary brand */
  --mh-accent-soft: #FBE3D8;    /* tint */
  --mh-accent-ink: #7A3B22;     /* on-soft text */

  --mh-sage: #6E8970;           /* secondary accent */
  --mh-sage-soft: #DCE6DC;

  --mh-warn: #B57940;
  --mh-warn-soft: #F4E4CF;

  /* Per-event hue (light) — all desaturated, share L ≈ 0.78 */
  --mh-ev-direct: oklch(0.78 0.06 20);   /* warm rose */
  --mh-ev-bottle: oklch(0.78 0.06 60);   /* peach */
  --mh-ev-formula: oklch(0.83 0.05 90);  /* sand */
  --mh-ev-urine: oklch(0.80 0.05 220);   /* dusty blue */
  --mh-ev-stool: oklch(0.80 0.04 280);   /* lavender-grey */

  --mh-ev-direct-ink: oklch(0.40 0.10 20);
  --mh-ev-bottle-ink: oklch(0.42 0.10 60);
  --mh-ev-formula-ink: oklch(0.40 0.08 80);
  --mh-ev-urine-ink: oklch(0.42 0.08 220);
  --mh-ev-stool-ink: oklch(0.42 0.06 280);

  /* Shadows */
  --mh-shadow-1: 0 1px 2px rgba(54, 38, 24, 0.04), 0 2px 6px rgba(54, 38, 24, 0.04);
  --mh-shadow-2: 0 2px 6px rgba(54, 38, 24, 0.05), 0 8px 24px rgba(54, 38, 24, 0.06);
  --mh-shadow-lift: 0 12px 32px rgba(54, 38, 24, 0.10);
}

[data-theme="dark"] {
  --mh-bg: #15171D;             /* deep slate */
  --mh-bg-sub: #1A1D24;
  --mh-surface: #1E222A;
  --mh-surface-2: #242833;
  --mh-line: rgba(255, 255, 255, 0.06);
  --mh-line-strong: rgba(255, 255, 255, 0.12);

  --mh-fg: #EDE6DA;
  --mh-fg-2: #BFB6A6;
  --mh-fg-3: #8B8275;
  --mh-fg-4: #5A5448;

  --mh-accent: #E88E6E;
  --mh-accent-soft: #3A2820;
  --mh-accent-ink: #F4C2AC;

  --mh-sage: #8FA890;
  --mh-sage-soft: #28332A;

  --mh-warn: #D6A06C;
  --mh-warn-soft: #332518;

  --mh-ev-direct: oklch(0.36 0.06 20);
  --mh-ev-bottle: oklch(0.36 0.06 60);
  --mh-ev-formula: oklch(0.36 0.05 90);
  --mh-ev-urine: oklch(0.36 0.05 220);
  --mh-ev-stool: oklch(0.36 0.04 280);

  --mh-ev-direct-ink: oklch(0.85 0.10 20);
  --mh-ev-bottle-ink: oklch(0.85 0.10 60);
  --mh-ev-formula-ink: oklch(0.86 0.08 80);
  --mh-ev-urine-ink: oklch(0.85 0.08 220);
  --mh-ev-stool-ink: oklch(0.85 0.06 280);

  --mh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.25);
  --mh-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.30);
  --mh-shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Accent variants — overrideable via Tweaks */
[data-accent="apricot"] {
  --mh-accent: #D87554;
  --mh-accent-soft: #FBE3D8;
  --mh-accent-ink: #7A3B22;
}
[data-accent="apricot"][data-theme="dark"] {
  --mh-accent: #E88E6E;
  --mh-accent-soft: #3A2820;
  --mh-accent-ink: #F4C2AC;
}

[data-accent="lavender"] {
  --mh-accent: #8C7AB8;
  --mh-accent-soft: #EAE2F4;
  --mh-accent-ink: #3D3162;
}
[data-accent="lavender"][data-theme="dark"] {
  --mh-accent: #B0A0D8;
  --mh-accent-soft: #2A2438;
  --mh-accent-ink: #DCD0F0;
}

[data-accent="mint"] {
  --mh-accent: #5A9479;
  --mh-accent-soft: #DCEBE3;
  --mh-accent-ink: #1E4A35;
}
[data-accent="mint"][data-theme="dark"] {
  --mh-accent: #88B89C;
  --mh-accent-soft: #1F2F26;
  --mh-accent-ink: #C8E2D2;
}

[data-accent="sand"] {
  --mh-accent: #B58953;
  --mh-accent-soft: #F1E5CD;
  --mh-accent-ink: #6A4818;
}
[data-accent="sand"][data-theme="dark"] {
  --mh-accent: #D6A87A;
  --mh-accent-soft: #322619;
  --mh-accent-ink: #F0D4AC;
}

/* ─── Base resets within an mh-screen ─────────────────── */
.mh-screen {
  font-family: var(--mh-font);
  color: var(--mh-fg);
  background: var(--mh-bg);
  font-feature-settings: 'ss03', 'tnum';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.mh-screen *, .mh-screen *::before, .mh-screen *::after {
  box-sizing: border-box;
}
.mh-screen button {
  font: inherit; color: inherit; border: 0; background: none;
  padding: 0; cursor: pointer;
}
.mh-screen input, .mh-screen textarea {
  font: inherit; color: inherit;
}
.mh-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }