/* ==========================================================================
   Genesis Homeopathy — Theme: "midnight-modern"
   Drastically different from apothecary: dark-mode tech aesthetic.
   Deep navy/near-black surfaces, electric cyan + violet accents,
   geometric sans typography. Built as a TEST theme to exercise the swap
   procedure — not a brand proposal.
   Fonts: Space Grotesk (headings) + Inter (body). Self-hosted woff2.
   ========================================================================== */

:root {
    /* ---- Color: dark palette (OKLCH, hex fallbacks first) ---- */
    --navy-950: #0b0f1a;  --navy-950: oklch(0.16 0.03 260);
    --navy-900: #131a2b;  --navy-900: oklch(0.22 0.035 260);
    --navy-800: #1d2740;  --navy-800: oklch(0.28 0.04 262);

    --cyan-500: #38c7d8;  --cyan-500: oklch(0.78 0.10 210);
    --cyan-400: #5cd6e4;  --cyan-400: oklch(0.83 0.09 208);

    --violet-500: #8b7cf6; --violet-500: oklch(0.65 0.16 285);

    --text-hi:  #eef2fa;  --text-hi:  oklch(0.96 0.01 250);
    --text-mid: #aab5cc;  --text-mid: oklch(0.78 0.03 255);

    /* ---- Semantic aliases (names match the token contract) ---- */
    --color-bg: var(--navy-950);
    --color-surface: var(--navy-900);
    --color-heading: var(--text-hi);
    --color-text: var(--text-hi);
    --color-text-muted: var(--text-mid);
    --color-primary: var(--cyan-500);
    --color-primary-hover: var(--cyan-400);
    --color-accent: var(--violet-500);
    --color-accent-hover: oklch(0.70 0.16 285);
    --color-detail: var(--cyan-500);


    /* ---- Contract additions (v2) ---- */
    --color-border: var(--navy-800);
    --color-surface-raised: var(--navy-800);
    --button-label: var(--navy-950);           /* dark label on bright cyan/violet fills */

    /* ---- Typography (same scale, different families) ---- */
    --font-heading: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

    --text-sm:   clamp(0.83rem, 0.78rem + 0.25vw, 0.9rem);
    --text-base: clamp(1rem, 0.93rem + 0.35vw, 1.125rem);
    --text-lg:   clamp(1.15rem, 1.02rem + 0.65vw, 1.375rem);
    --text-xl:   clamp(1.35rem, 1.05rem + 1.5vw, 1.9rem);
    --text-2xl:  clamp(1.7rem, 1.1rem + 3vw, 2.75rem);
    --text-3xl:  clamp(2.1rem, 1.2rem + 4.5vw, 3.6rem);

    --leading-tight: 1.15;
    --leading-body: 1.65;

    /* ---- Spacing (identical to contract) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* ---- Layout & misc ---- */
    --measure: 66ch;
    --radius: 14px;
    --shadow-soft: 0 2px 20px oklch(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    :root { --transition: 180ms ease; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --transition: none; }
}

/* ---- Mode variants ---- */
@import url("midnight-modern/light.css");