/**
 * Melody Magic — base elements + brand block style variations.
 *
 * Phase 1 (MM-007 rebuild):
 *   1. The full --mm-* token set from docs/melody-magic-design-system/
 *      project/colors_and_type.css is emitted at :root so any pattern
 *      authored against the design system's variable names works.
 *   2. Backward-compat aliases for the old MM-004/005/006/007 slugs
 *      (teal-base, gray-100, font-size xs/sm/lg/2xl/3xl/etc., spacing
 *      20-80) point at the new --mm-* values. MM-005 nav, MM-006
 *      footer/floating-cta, and MM-007 homepage continue to render
 *      until phases 2+ rewrite them against the new tokens.
 *   3. Base element styles (body, h1-h6, .mm-eyebrow, .mm-lede, links)
 *      mirror the bottom of colors_and_type.css.
 *   4. The 9 block style variations from MM-004 are refactored to
 *      reference the new tokens. Slugs and registrations are unchanged
 *      so the editor sidebar still shows them.
 *
 * Loaded conditionally per-block via wp_enqueue_block_style().
 */

/* =====================================================================
   1. Design-system tokens (raw --mm-* names, mirror of colors_and_type.css)
===================================================================== */
:root {
    /* Brand */
    --mm-teal:        #42AE9A;
    --mm-teal-50:     #F4FAF8;
    --mm-teal-100:    #E8F5F2;
    --mm-teal-200:    #C8E8E1;
    --mm-teal-300:    #9FD6CC;
    --mm-teal-400:    #70C0C0;
    --mm-teal-500:    #40B0A0;
    --mm-teal-700:    #1F7A70;
    --mm-teal-800:    #155C55;
    --mm-teal-900:    #0E3F3A;

    --mm-grape:       #7A3A96;
    --mm-grape-100:   #EDE3F2;
    --mm-grape-200:   #DAC4E4;
    --mm-grape-300:   #B892C9;
    --mm-grape-500:   #8040A0;
    --mm-grape-700:   #5F2C75;

    /* Warm accents */
    --mm-apricot:     #F2A65A;
    --mm-apricot-100: #FBE8D2;
    --mm-apricot-300: #F8C995;
    --mm-coral:       #E56B5E;
    --mm-butter:      #F4D16A;
    --mm-butter-100:  #FCF3D2;
    --mm-butter-700:  #A87E16;

    /* Neutrals */
    --mm-ink:         #1F2A2E;
    --mm-ink-2:       #3E4C52;
    --mm-ink-3:       #6B787D;
    --mm-ink-4:       #9AA4A8;
    --mm-line:        #E3E8EA;
    --mm-line-strong: #CBD3D6;
    --mm-paper:       #FAFAF7;
    --mm-paper-2:     #F3F1EB;
    --mm-white:       #FFFFFF;

    /* Semantic */
    --mm-bg:          var(--mm-paper);
    --mm-bg-alt:      var(--mm-paper-2);
    --mm-bg-tint:     var(--mm-teal-50);
    --mm-surface:     var(--mm-white);
    --mm-fg:          var(--mm-ink);
    --mm-fg-2:        var(--mm-ink-2);
    --mm-fg-3:        var(--mm-ink-3);
    --mm-fg-on-teal:  var(--mm-white);
    --mm-brand:       var(--mm-teal);
    --mm-brand-hover: var(--mm-teal-700);
    --mm-accent:      var(--mm-grape);
    --mm-accent-soft: var(--mm-grape-100);
    --mm-focus-ring:  color-mix(in oklab, var(--mm-teal) 45%, transparent);
    --mm-success:     #2F9A6B;
    --mm-warn:        var(--mm-apricot);
    --mm-error:       var(--mm-coral);

    /* Type families */
    --mm-font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mm-font-body:    'Source Sans 3', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mm-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Type scale */
    --mm-fs-eyebrow: clamp(11px, 0.7vw + 9px, 13px);
    --mm-fs-micro:   13px;
    --mm-fs-small:   14px;
    --mm-fs-body:    16.5px;
    --mm-fs-body-lg: 18px;
    --mm-fs-lede:    clamp(18px, 0.6vw + 16px, 22px);
    --mm-fs-h6:      17px;
    --mm-fs-h5:      20px;
    --mm-fs-h4:      clamp(22px, 1vw + 18px, 26px);
    --mm-fs-h3:      clamp(26px, 1.4vw + 20px, 34px);
    --mm-fs-h2:      clamp(32px, 2.2vw + 22px, 48px);
    --mm-fs-h1:      clamp(40px, 3.6vw + 24px, 72px);
    --mm-fs-display: clamp(52px, 5vw + 28px, 96px);

    /* Weights */
    --mm-w-reg:   400;
    --mm-w-med:   500;
    --mm-w-semi:  600;
    --mm-w-bold:  700;
    --mm-w-black: 800;

    /* Line heights */
    --mm-lh-tight:  1.05;
    --mm-lh-snug:   1.2;
    --mm-lh-normal: 1.45;
    --mm-lh-body:   1.6;

    /* Letter spacing */
    --mm-ls-caps:    0.12em;
    --mm-ls-tight:   -0.02em;
    --mm-ls-display: -0.025em;

    /* Radii */
    --mm-r-xs:   6px;
    --mm-r-sm:   10px;
    --mm-r-md:   14px;
    --mm-r-lg:   20px;
    --mm-r-xl:   28px;
    --mm-r-pill: 999px;

    /* Shadows */
    --mm-shadow-xs:    0 1px 2px rgba(21, 92, 85, 0.06);
    --mm-shadow-sm:    0 2px 8px rgba(21, 92, 85, 0.08);
    --mm-shadow-md:    0 8px 24px -8px rgba(21, 92, 85, 0.14), 0 2px 6px rgba(21, 92, 85, 0.06);
    --mm-shadow-lg:    0 22px 44px -18px rgba(21, 92, 85, 0.22), 0 4px 12px rgba(21, 92, 85, 0.07);
    --mm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* Spacing (4px base) */
    --mm-s-1:  4px;
    --mm-s-2:  8px;
    --mm-s-3:  12px;
    --mm-s-4:  16px;
    --mm-s-5:  20px;
    --mm-s-6:  24px;
    --mm-s-8:  32px;
    --mm-s-10: 40px;
    --mm-s-12: 48px;
    --mm-s-16: 64px;
    --mm-s-20: 80px;
    --mm-s-24: 96px;

    /* Motion */
    --mm-ease:     cubic-bezier(.22, .61, .36, 1);
    --mm-ease-out: cubic-bezier(.16, 1, .3, 1);
    --mm-ease-in:  cubic-bezier(.5, 0, .75, 0);
    --mm-dur-fast: 140ms;
    --mm-dur:      220ms;
    --mm-dur-slow: 420ms;
}

/* =====================================================================
   2. Backward-compat aliases for old MM-004 slugs
      Old code that references --wp--preset--color--teal-base,
      --wp--preset--spacing--40, --wp--preset--font-size--lg, etc. keeps
      working until subsequent phases rewrite the patterns.
===================================================================== */
:root {
    /* Old colors → new */
    --wp--preset--color--teal-base:    var(--mm-teal);
    --wp--preset--color--teal-light:   var(--mm-teal-400);
    --wp--preset--color--teal-dark:    var(--mm-teal-700);
    --wp--preset--color--purple-base:  var(--mm-grape);
    --wp--preset--color--purple-light: var(--mm-grape-300);
    --wp--preset--color--purple-dark:  var(--mm-grape-700);
    --wp--preset--color--black:        var(--mm-ink);
    /* white kept as own slug in theme.json */
    --wp--preset--color--gray-100:     var(--mm-paper-2);
    --wp--preset--color--gray-300:     var(--mm-line-strong);
    --wp--preset--color--gray-700:     var(--mm-ink-2);
    --wp--preset--color--success:      var(--mm-success);
    --wp--preset--color--warning:      var(--mm-apricot);
    --wp--preset--color--error:        var(--mm-coral);

    /* Old font sizes → new (rough scale equivalents) */
    --wp--preset--font-size--xs:   var(--mm-fs-eyebrow);
    --wp--preset--font-size--sm:   var(--mm-fs-small);
    --wp--preset--font-size--base: var(--mm-fs-body);
    --wp--preset--font-size--lg:   var(--mm-fs-body-lg);
    --wp--preset--font-size--xl:   var(--mm-fs-h5);
    --wp--preset--font-size--2xl:  var(--mm-fs-h4);
    --wp--preset--font-size--3xl:  var(--mm-fs-h3);
    --wp--preset--font-size--4xl:  var(--mm-fs-h2);
    --wp--preset--font-size--5xl:  var(--mm-fs-h1);

    /* Old spacing → new */
    --wp--preset--spacing--20: var(--mm-s-2);
    --wp--preset--spacing--30: var(--mm-s-3);
    --wp--preset--spacing--40: var(--mm-s-5);
    --wp--preset--spacing--50: var(--mm-s-8);
    --wp--preset--spacing--60: var(--mm-s-12);
    --wp--preset--spacing--70: var(--mm-s-16);
    --wp--preset--spacing--80: var(--mm-s-20);

    /* Old font families → new */
    --wp--preset--font-family--heading: var(--mm-font-display);
    --wp--preset--font-family--body:    var(--mm-font-body);
}

/* =====================================================================
   3. Base elements — mirror colors_and_type.css
===================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--mm-font-body);
    font-size: var(--mm-fs-body);
    line-height: var(--mm-lh-body);
    color: var(--mm-fg);
    background: var(--mm-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .mm-display {
    font-family: var(--mm-font-display);
    color: var(--mm-fg);
    font-weight: var(--mm-w-bold);
    line-height: var(--mm-lh-snug);
    letter-spacing: var(--mm-ls-tight);
    text-wrap: balance;
}

.mm-display {
    font-size: var(--mm-fs-display);
    font-weight: 800;
    line-height: var(--mm-lh-tight);
    letter-spacing: var(--mm-ls-display);
}
h1, .mm-h1 { font-size: var(--mm-fs-h1); font-weight: 800; line-height: var(--mm-lh-tight); letter-spacing: var(--mm-ls-display); }
h2, .mm-h2 { font-size: var(--mm-fs-h2); font-weight: 800; }
h3, .mm-h3 { font-size: var(--mm-fs-h3); font-weight: 700; }
h4, .mm-h4 { font-size: var(--mm-fs-h4); font-weight: 700; }
h5, .mm-h5 { font-size: var(--mm-fs-h5); font-weight: 700; }
h6, .mm-h6 { font-size: var(--mm-fs-h6); font-weight: 600; }

.mm-eyebrow {
    font-family: var(--mm-font-display);
    font-size: var(--mm-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--mm-ls-caps);
    text-transform: uppercase;
    color: var(--mm-teal-700);
}

.mm-lede {
    font-family: var(--mm-font-body);
    font-size: var(--mm-fs-lede);
    line-height: 1.5;
    color: var(--mm-fg-2);
    font-weight: 400;
    text-wrap: pretty;
}

p { text-wrap: pretty; }
small, .mm-small { font-size: var(--mm-fs-small); color: var(--mm-fg-3); }
.mm-micro { font-size: var(--mm-fs-micro); color: var(--mm-fg-3); }

a {
    color: var(--mm-teal-700);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--mm-teal) 40%, transparent);
    transition: color var(--mm-dur) var(--mm-ease), text-decoration-color var(--mm-dur) var(--mm-ease);
}
a:hover { color: var(--mm-teal-800); text-decoration-color: var(--mm-teal); }
a:focus-visible { outline: 3px solid var(--mm-focus-ring); outline-offset: 2px; border-radius: 3px; }

code, kbd, pre { font-family: var(--mm-font-mono); font-size: 0.92em; }
::selection { background: var(--mm-teal-200); color: var(--mm-ink); }

/* =====================================================================
   4. Brand block style variations (registered in inc/block-styles.php)
===================================================================== */

/* ----- core/button --------------------------------------------------- */

.wp-block-button.is-style-primary-teal > .wp-block-button__link {
    background-color: var(--mm-teal);
    color: var(--mm-white);
    border: 0;
    border-radius: var(--mm-r-pill);
    padding-block: var(--mm-s-3);
    padding-inline: var(--mm-s-6);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease);
}
.wp-block-button.is-style-primary-teal > .wp-block-button__link:hover,
.wp-block-button.is-style-primary-teal > .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-700);
}

.wp-block-button.is-style-secondary-purple > .wp-block-button__link {
    background-color: var(--mm-grape);
    color: var(--mm-white);
    border: 0;
    border-radius: var(--mm-r-pill);
    padding-block: var(--mm-s-3);
    padding-inline: var(--mm-s-6);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    transition: background-color var(--mm-dur) var(--mm-ease);
}
.wp-block-button.is-style-secondary-purple > .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-purple > .wp-block-button__link:focus-visible {
    background-color: var(--mm-grape-700);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--mm-teal-800);
    border: 2px solid var(--mm-teal);
    border-radius: var(--mm-r-pill);
    padding-block: calc(var(--mm-s-3) - 2px);
    padding-inline: calc(var(--mm-s-6) - 2px);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal);
    color: var(--mm-white);
    border-color: var(--mm-teal);
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
    background-color: transparent;
    color: var(--mm-teal-800);
    border: 0;
    border-radius: var(--mm-r-pill);
    padding-block: var(--mm-s-3);
    padding-inline: var(--mm-s-5);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    transition: background-color var(--mm-dur) var(--mm-ease);
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-50);
}

/* ----- core/group ---------------------------------------------------- */

.wp-block-group.is-style-card {
    background-color: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r-lg);
    box-shadow: var(--mm-shadow-sm);
    padding: var(--mm-s-8);
}

.wp-block-group.is-style-featured-card {
    background-color: var(--mm-teal);
    color: var(--mm-white);
    border-radius: var(--mm-r-xl);
    box-shadow: var(--mm-shadow-lg);
    padding: var(--mm-s-12);
}

.wp-block-group.is-style-featured-card :is(h1, h2, h3, h4, h5, h6, p, a) {
    color: var(--mm-white);
}

/* ----- core/image ---------------------------------------------------- */

.wp-block-image.is-style-rounded img {
    border-radius: var(--mm-r-md);
}

.wp-block-image.is-style-shadow img {
    box-shadow: var(--mm-shadow-md);
    border-radius: var(--mm-r-md);
}

/* ----- core/list ----------------------------------------------------- */

.wp-block-list.is-style-checkmarks {
    list-style: none;
    padding-inline-start: 0;
}

.wp-block-list.is-style-checkmarks li {
    position: relative;
    padding-inline-start: var(--mm-s-8);
    margin-block-end: var(--mm-s-3);
}

.wp-block-list.is-style-checkmarks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.35em;
    width: 1em;
    height: 1em;
    background-color: var(--mm-teal);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M7.6 13.2 4.4 10l-1.4 1.4 4.6 4.6 10-10L16.2 4.6z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M7.6 13.2 4.4 10l-1.4 1.4 4.6 4.6 10-10L16.2 4.6z'/></svg>") no-repeat center / contain;
}

/* ----- body bleed (no paper-colored seams) -------------------------- */
/*
 * Two WP-core rules combine to create paper-colored seams above the header,
 * between body-level children, and below the footer on every template:
 *
 *   1) `.wp-site-blocks { padding-top: var(...); padding-bottom: var(...); }`
 *      — the root-padding feature, designed for constrained-layout themes
 *      where content sits in a padded tube. We use full-bleed alignfull
 *      bands everywhere, so the padding just creates a paper strip below
 *      the last section.
 *   2) `:where(body .is-layout-flow) > *{ margin-block-start: 1rem; }`
 *      — block-gap applied between header → main → footer siblings.
 *
 * Killing both at the body level lets every alignfull band on every
 * template (page, single, archives, 404, single-mm_*) bleed flush into the
 * header and footer with no inter-section seams.
 */
.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.wp-site-blocks > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ----- force cover hero to true viewport width ---------------------- */
/*
 * The wp-block-cover.alignfull inside an is-layout-constrained post-content
 * sometimes gets pinned to wideSize (1440px) instead of viewport width on
 * wider monitors, leaving paper gutters on the sides. Forcing 100vw on the
 * cover and 100% on its image-background pins both to the viewport edges.
 */
.wp-block-post-content > .wp-block-cover.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
.wp-block-post-content > .wp-block-cover.alignfull > .wp-block-cover__image-background,
.wp-block-post-content > .wp-block-cover.alignfull > .wp-block-cover__background,
.wp-block-post-content > .wp-block-cover.alignfull > .wp-block-cover__gradient-background {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    inset: 0 !important;
}