/* ==========================================================================
   MIRTH — PROFESSIONAL PRODUCT DESIGN SYSTEM (2026-08-14)
   "Conversation Weave" / pearl · mulberry · bottle teal
   --------------------------------------------------------------------------
   This is the full token layer for the commercial redesign. Every color,
   type size, radius, shadow, and motion value flows from these custom
   properties. The six user-selectable themes (midnight default, pearl,
   ember, forest, ocean, plum) each override the SAME token names, so the
   entire product re-skins consistently. The canonical Mirth identity is
   pearl & mulberry; the theme system lets each member choose their own
   surface without breaking the system.
   ========================================================================== */

:root {
  color-scheme: light;
  /* ---- brand color tokens (canonical pearl & mulberry) ---- */
  --mirth-bg: #f3f6f5;            /* cool pearl */
  --mirth-surface: #ffffff;       /* card surface */
  --mirth-surface-tint: #f7fbfa;  /* header / rail tint */
  --mirth-surface-muted: #e8eeec; /* quiet surface */
  --mirth-ink: #202730;           /* primary text */
  --mirth-ink-soft: #4e5a63;      /* secondary text */
  --mirth-ink-muted: #65727a;     /* tertiary / timestamps */
  --mirth-line: #cdd7d3;          /* hairline borders */
  --mirth-line-strong: #a7b5af;   /* hover borders */
  --mirth-accent: #8b2e5a;        /* mulberry primary */
  --mirth-accent-strong: #6f1f43; /* mulberry hover/active */
  --mirth-accent-soft: #f3dde7;   /* mulberry wash */
  --mirth-focus: #0c6870;         /* focus teal ring */
  --mirth-sky-soft: #dceff0;      /* teal wash */
  --mirth-warning: #94600f;
  --mirth-danger: #9e3542;
  --mirth-rye: #c2861d;           /* restrained emphasis */
  --mirth-signal: #c2861d;
  --mirth-teal: #176f68;          /* bottle teal (supporting identity) */
  --mirth-teal-soft: #dceeea;

  /* ---- surface / elevation ---- */
  --mirth-paper: var(--mirth-bg);
  --mirth-card: var(--mirth-surface);
  --mirth-card-hover: #fafcfb;
  --mirth-shadow: 0 12px 34px rgba(32, 39, 48, 0.08);
  --mirth-shadow-soft: 0 2px 8px rgba(32, 39, 48, 0.06);
  --mirth-shadow-hover: 0 16px 40px rgba(32, 39, 48, 0.12);

  /* ---- radius ---- */
  --radius-panel: 16px;
  --radius-control: 9px;
  --radius-pill: 999px;

  /* ---- type ---- */
  --font-display: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.85rem;   /* 13.6px */
  --text-md: 0.95rem;   /* 15.2px */
  --text-lg: 1.1rem;    /* 17.6px */
  --text-xl: 1.35rem;   /* 21.6px */
  --text-2xl: 1.7rem;   /* 27.2px */
  --text-3xl: 2.2rem;   /* 35.2px */
  --text-4xl: 2.9rem;   /* 46.4px */
  --text-display: clamp(2.6rem, 7vw, 4.2rem);
  --leading-tight: 1.08;
  --leading-normal: 1.5;
  --tracking-tight: -0.035em;
  --tracking-display: -0.05em;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- motion ---- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- layout ---- */
  --header-h: 60px;
  --content-max: 1120px;
  --rail-gap: 18px;
  --touch-min: 44px;
}

/* ===== Theme overrides (user-selectable; each re-skins the tokens) ===== */
body[data-theme="midnight"] {
  color-scheme: dark;
  --mirth-bg: #0f171e;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #16212b;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #1a2731;
  --mirth-surface-muted: #22313c;
  --mirth-ink: #e7f0f3;
  --mirth-ink-soft: #b8c6cd;
  --mirth-ink-muted: #8b9ba3;
  --mirth-line: #2a3a45;
  --mirth-line-strong: #3a4e5b;
  --mirth-accent: #2dd4bf;
  --mirth-on-accent: var(--mirth-bg);
  --mirth-accent-strong: #14b8a6;
  --mirth-accent-soft: #0f2e33;
  --mirth-focus: #5eead4;
  --mirth-sky-soft: #10303a;
  --mirth-warning: #f5c04b;
  --mirth-danger: #fb7185;
  --mirth-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  --mirth-card-hover: #1b2834;
  --mirth-rye: #d9a441;
  --mirth-signal: #2dd4bf;
  --mirth-teal: #2dd4bf;
  --mirth-teal-soft: #10303a;
}

body[data-theme="pearl"] {
  color-scheme: light;
  --mirth-bg: #f3f6f5;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #ffffff;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #f7fbfa;
  --mirth-surface-muted: #e8eeec;
  --mirth-ink: #202730;
  --mirth-ink-soft: #4e5a63;
  --mirth-ink-muted: #65727a;
  --mirth-line: #cdd7d3;
  --mirth-line-strong: #a7b5af;
  --mirth-accent: #8b2e5a;
  --mirth-on-accent: #fff;
  --mirth-accent-strong: #6f1f43;
  --mirth-accent-soft: #f3dde7;
  --mirth-focus: #0c6870;
  --mirth-sky-soft: #dceff0;
  --mirth-warning: #94600f;
  --mirth-danger: #9e3542;
  --mirth-shadow: 0 12px 34px rgba(32, 39, 48, 0.08);
  --mirth-card-hover: #fafcfb;
  --mirth-rye: #c2861d;
  --mirth-signal: #c2861d;
  --mirth-teal: #176f68;
  --mirth-teal-soft: #dceeea;
}

body[data-theme="ember"] {
  color-scheme: light;
  --mirth-bg: #faf3e7;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #fffdf8;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #fbf5ea;
  --mirth-surface-muted: #f0e4d0;
  --mirth-ink: #3b2f25;
  --mirth-ink-soft: #6b5a47;
  --mirth-ink-muted: #76634c;
  --mirth-line: #e6d8c2;
  --mirth-line-strong: #d3bfa0;
  --mirth-accent: #c2542e;
  --mirth-on-accent: #fff;
  --mirth-accent-strong: #9c3f1f;
  --mirth-accent-soft: #fbe9e0;
  --mirth-focus: #a83c1f;
  --mirth-sky-soft: #f3e3d8;
  --mirth-warning: #a56a1c;
  --mirth-danger: #b0402f;
  --mirth-shadow: 0 12px 34px rgba(91, 70, 45, 0.10);
  --mirth-card-hover: #fff9ef;
  --mirth-rye: #c2861d;
  --mirth-signal: #c2542e;
  --mirth-teal: #176f68;
  --mirth-teal-soft: #dceeea;
}

body[data-theme="forest"] {
  color-scheme: dark;
  --mirth-bg: #0d1a14;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #14241c;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #182b21;
  --mirth-surface-muted: #20352a;
  --mirth-ink: #e9f2ea;
  --mirth-ink-soft: #b9cbbd;
  --mirth-ink-muted: #8aa395;
  --mirth-line: #27402f;
  --mirth-line-strong: #37573f;
  --mirth-accent: #6fcf97;
  --mirth-on-accent: var(--mirth-bg);
  --mirth-accent-strong: #4fae73;
  --mirth-accent-soft: #12301f;
  --mirth-focus: #8fe3b0;
  --mirth-sky-soft: #163528;
  --mirth-warning: #e0b64e;
  --mirth-danger: #e07b6d;
  --mirth-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  --mirth-card-hover: #192d22;
  --mirth-rye: #d9b45a;
  --mirth-signal: #6fcf97;
  --mirth-teal: #4fae73;
  --mirth-teal-soft: #12301f;
}

body[data-theme="ocean"] {
  color-scheme: light;
  --mirth-bg: #eef3f7;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #ffffff;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #f5f9fb;
  --mirth-surface-muted: #dde7ee;
  --mirth-ink: #1c2b36;
  --mirth-ink-soft: #47606f;
  --mirth-ink-muted: #5a7180;
  --mirth-line: #ccdbe4;
  --mirth-line-strong: #a9c0cd;
  --mirth-accent: #1f6f8b;
  --mirth-on-accent: #fff;
  --mirth-accent-strong: #14576e;
  --mirth-accent-soft: #dceef5;
  --mirth-focus: #0e5d7a;
  --mirth-sky-soft: #dceef5;
  --mirth-warning: #8a6a1c;
  --mirth-danger: #b0413d;
  --mirth-shadow: 0 12px 34px rgba(28, 43, 54, 0.08);
  --mirth-card-hover: #f2f8fb;
  --mirth-rye: #c2882e;
  --mirth-signal: #1f6f8b;
  --mirth-teal: #1f6f8b;
  --mirth-teal-soft: #dceef5;
}

body[data-theme="plum"] {
  color-scheme: dark;
  --mirth-bg: #170f1d;
  --mirth-paper: var(--mirth-bg);
  --mirth-surface: #211530;
  --mirth-card: var(--mirth-surface);
  --mirth-surface-tint: #271a38;
  --mirth-surface-muted: #322344;
  --mirth-ink: #f0e9f5;
  --mirth-ink-soft: #c4b6d0;
  --mirth-ink-muted: #9a8aa8;
  --mirth-line: #3a2b4a;
  --mirth-line-strong: #4d3a60;
  --mirth-accent: #c67fe0;
  --mirth-on-accent: var(--mirth-bg);
  --mirth-accent-strong: #b96ed6;
  --mirth-accent-soft: #2c1a3d;
  --mirth-focus: #d99ff2;
  --mirth-sky-soft: #2e1e40;
  --mirth-warning: #e5b95a;
  --mirth-danger: #ec7d96;
  --mirth-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  --mirth-card-hover: #2a1c3e;
  --mirth-rye: #e5b95a;
  --mirth-signal: #c67fe0;
  --mirth-teal: #7fd8c8;
  --mirth-teal-soft: #1d3a36;
}