/* GM Design System (Indigo + Honey) — overnight pass 2026-04-18 */

:root {
    --gm-indigo:        #2B2D5E;
    --gm-indigo-mid:    #4A4E8A;
    --gm-indigo-soft:   #6B6FAE;
    --gm-indigo-pale:   #E8E7F4;
    --gm-ink:           #1A1A30;
    --gm-honey:         #D4A84B;
    --gm-honey-light:   #E2BC65;
    --gm-honey-dark:    #9A7830;
    --gm-honey-pale:    #F6E8C5;
    --gm-cloud:         #F0EEE9;
    --gm-cream:         #F8F5EC;
    --gm-white-soft:    #FAFAF5;
    --gm-line:          rgba(26,26,48,0.08);
    --gm-line-honey:    rgba(212,168,75,0.18);
    --gm-shadow-subtle:   0 1px 3px rgba(26,26,48,0.06);
    --gm-shadow-medium:   0 4px 12px rgba(26,26,48,0.08);
    --gm-shadow-elevated: 0 12px 32px rgba(26,26,48,0.12);
    --gm-shadow-glow:     0 0 0 3px rgba(212,168,75,0.15);
    --gm-radius-sm: 8px;
    --gm-radius-md: 14px;
    --gm-radius-lg: 22px;
    --gm-radius-pill: 9999px;
    --gm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gm-trans-fast: 120ms var(--gm-ease);
    --gm-trans: 200ms var(--gm-ease);
    --gm-trans-slow: 320ms var(--gm-ease);
}
@media (prefers-reduced-motion: reduce) {
    :root { --gm-trans-fast: 0ms; --gm-trans: 0ms; --gm-trans-slow: 0ms; }
}

/* CARDS */
.gm-card {
    background: var(--gm-cream);
    border-radius: var(--gm-radius-md);
    padding: 24px;
    box-shadow: var(--gm-shadow-subtle);
    border: 1px solid var(--gm-line);
    transition: transform var(--gm-trans), box-shadow var(--gm-trans);
}
.gm-card--interactive:hover,
a.gm-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gm-shadow-elevated);
    text-decoration: none;
}
.gm-card--featured {
    border-color: var(--gm-line-honey);
    box-shadow: var(--gm-shadow-medium);
}

/* BUTTONS — pill primary + outline */
.gm-btn,
.gm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 28px;
    border-radius: var(--gm-radius-pill);
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform var(--gm-trans), box-shadow var(--gm-trans), background var(--gm-trans);
}
.gm-btn-primary,
.gm-pill-primary {
    background: linear-gradient(180deg, var(--gm-honey) 0%, var(--gm-honey-dark) 100%);
    color: var(--gm-ink);
    box-shadow: var(--gm-shadow-subtle);
}
.gm-btn-primary:hover,
.gm-pill-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--gm-shadow-elevated), var(--gm-shadow-glow);
    color: var(--gm-ink);
}
.gm-btn-outline,
.gm-pill-outline {
    background: transparent;
    color: var(--gm-indigo);
    border: 1.5px solid var(--gm-indigo);
}
.gm-btn-outline:hover,
.gm-pill-outline:hover {
    background: var(--gm-indigo);
    color: var(--gm-cloud);
    transform: translateY(-1px);
}
.gm-btn:focus-visible,
.gm-pill:focus-visible {
    outline: none;
    box-shadow: var(--gm-shadow-glow);
}

/* EMPTY STATES */
.gm-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--gm-cream);
    border-radius: var(--gm-radius-md);
    border: 1px dashed var(--gm-line-honey);
    color: var(--gm-indigo-mid);
}
.gm-empty-icon {
    font-size: 48px;
    color: var(--gm-honey);
    margin-bottom: 16px;
    display: block;
}
.gm-empty-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    color: var(--gm-ink);
    margin: 0 0 8px;
    font-weight: 600;
}
.gm-empty-body {
    font-size: 16px;
    color: var(--gm-indigo-mid);
    margin: 0 0 20px;
    line-height: 1.6;
}

/* FORMS */
.gm-input,
.gm-textarea,
.gm-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-radius-sm);
    background: var(--gm-white-soft);
    color: var(--gm-ink);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    transition: border-color var(--gm-trans), box-shadow var(--gm-trans);
}
.gm-input:focus,
.gm-textarea:focus,
.gm-select:focus {
    outline: none;
    border-color: var(--gm-honey);
    box-shadow: var(--gm-shadow-glow);
}
.gm-textarea { min-height: 120px; resize: vertical; }
.gm-label-form {
    display: block;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-indigo);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* SECTION RHYTHM */
.gm-section { padding: 56px 20px; }
.gm-section-tight { padding: 32px 20px; }
.gm-section-light { background: var(--gm-cream); }
.gm-section-pale { background: var(--gm-white-soft); }

@media (max-width: 768px) {
    .gm-section { padding: 40px 16px; }
    .gm-card { padding: 20px; }
    .gm-empty { padding: 32px 20px; }
}

/* AVATAR / CHIP */
.gm-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gm-honey-pale);
    box-shadow: var(--gm-shadow-subtle);
}
.gm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--gm-honey-pale);
    color: var(--gm-honey-dark);
    border-radius: var(--gm-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.gm-chip--indigo { background: var(--gm-indigo-pale); color: var(--gm-indigo); }

/* DAISY CHAT — sender side on RIGHT (Kean feedback) */
.bm-message-outgoing,
.bp-better-messages .bm-message[data-mine="1"],
.better-messages .bm-message.is-mine {
    align-self: flex-end !important;
    margin-left: auto !important;
}
.bm-message-outgoing .bm-message-content,
.bp-better-messages .bm-message[data-mine="1"] .bm-message-content,
.better-messages .bm-message.is-mine .bm-message-content {
    background: var(--gm-indigo) !important;
    color: var(--gm-cloud) !important;
    border-radius: var(--gm-radius-md) var(--gm-radius-md) 4px var(--gm-radius-md) !important;
}
.bm-message-incoming .bm-message-content,
.bp-better-messages .bm-message:not([data-mine="1"]) .bm-message-content,
.better-messages .bm-message:not(.is-mine) .bm-message-content {
    background: var(--gm-cream) !important;
    color: var(--gm-ink) !important;
    border-radius: var(--gm-radius-md) var(--gm-radius-md) var(--gm-radius-md) 4px !important;
}

/* LOADING SPINNER */
.gm-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--gm-honey-pale);
    border-top-color: var(--gm-honey);
    border-radius: 50%;
    animation: gm-spin 0.7s linear infinite;
}
@keyframes gm-spin {
    to { transform: rotate(360deg); }
}
/* GM Design System — Utilities (added 2026-04-18 second batch)
 * Container widths, alignment, spacing utilities.
 * Companion to gm-design-system.css; loaded via same mu-plugin.
 */

/* CONTAINERS */
.gm-container { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.gm-container--narrow { max-width: 680px; }
.gm-container--wide { max-width: 960px; }
.gm-container--reading { max-width: 740px; }

/* TEXT ALIGNMENT */
.gm-text-center { text-align: center; }
.gm-text-left { text-align: left; }
.gm-text-right { text-align: right; }

/* SPACING (margin utilities — use sparingly, prefer section padding) */
.gm-mt-0  { margin-top: 0; }
.gm-mt-xs { margin-top: 4px; }
.gm-mt-sm { margin-top: 8px; }
.gm-mt-md { margin-top: 16px; }
.gm-mt-lg { margin-top: 24px; }
.gm-mt-xl { margin-top: 32px; }
.gm-mt-2xl { margin-top: 48px; }

/* FLEX HELPERS */
.gm-stack { display: flex; flex-direction: column; gap: 16px; }
.gm-stack--sm { gap: 8px; }
.gm-stack--lg { gap: 24px; }
.gm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gm-cluster--center { justify-content: center; }
.gm-cluster--between { justify-content: space-between; }
.gm-grow { flex: 1; min-width: 280px; }

/* SECTION variants — backgrounds + heavy padding */
.gm-section--cream { background: var(--gm-cream); }
.gm-section--white-soft { background: var(--gm-white-soft); }
.gm-section--indigo { background: var(--gm-indigo); color: var(--gm-cloud); }
.gm-section--hero { padding: 80px 20px 60px; border-bottom: 3px solid var(--gm-honey); background: var(--gm-cream); text-align: center; }

/* DIVIDERS using design tokens */
.gm-divider {
    height: 3px;
    margin: 32px auto;
    max-width: 240px;
    background: linear-gradient(90deg, transparent, var(--gm-honey), transparent);
    border: none;
}
.gm-gold-rule {
    height: 1px;
    margin: 24px auto;
    max-width: 200px;
    background: var(--gm-honey);
    opacity: 0.5;
}

/* STATS BAR — used by [gm_stats_bar] */
.gm-stats-bar {
    background: var(--gm-indigo);
    color: var(--gm-cloud);
    padding: 56px 20px;
}
.gm-stats-bar .gm-cluster {
    max-width: 900px;
    margin: 0 auto;
}
.gm-stat-item {
    flex: 1;
    min-width: 180px;
    text-align: center;
    padding: 16px;
}
.gm-stat-item + .gm-stat-item {
    border-left: 1px solid rgba(212,168,75,0.3);
}
@media (max-width: 768px) {
    .gm-stat-item + .gm-stat-item { border-left: none; border-top: 1px solid rgba(212,168,75,0.2); }
}
.gm-stat-number {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: var(--gm-honey);
    margin: 0 0 8px;
    font-weight: 700;
}
.gm-stat-label {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    color: var(--gm-cloud);
    margin: 0 0 4px;
    font-weight: 600;
}
.gm-stat-sub {
    font-size: 13px;
    color: rgba(240,238,233,0.65);
    margin: 0;
    font-style: italic;
}

/* BOOK CARDS — used by [gm_book_cards] */
.gm-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}
.gm-book-card {
    background: var(--gm-white-soft);
    border-radius: var(--gm-radius-md);
    padding: 24px;
    box-shadow: var(--gm-shadow-subtle);
    border: 1px solid var(--gm-line);
    transition: transform var(--gm-trans), box-shadow var(--gm-trans);
}
.gm-book-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gm-shadow-elevated);
    border-color: var(--gm-line-honey);
}
.gm-book-label {
    font-size: 11px;
    color: var(--gm-honey-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin: 0 0 8px;
}
.gm-book-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    color: var(--gm-indigo);
    margin: 0 0 12px;
    font-weight: 600;
}
.gm-book-desc {
    font-size: 15px;
    color: var(--gm-ink);
    line-height: 1.6;
    margin: 0 0 16px;
}
.gm-book-link {
    color: var(--gm-honey-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gm-line-honey);
    transition: color var(--gm-trans), border-color var(--gm-trans);
}
.gm-book-link:hover {
    color: var(--gm-indigo);
    border-bottom-color: var(--gm-honey);
}

/* TWO-HOUR TEST FILL BOX */
.gm-fill-box {
    background: var(--gm-cream);
    border: 1px dashed var(--gm-honey);
    border-radius: var(--gm-radius-md);
    padding: 24px 28px;
    margin: 24px 0 28px;
}
.gm-fill-line {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    color: var(--gm-ink);
    margin: 0 0 12px;
    line-height: 1.5;
}
.gm-fill-line:last-of-type { margin-bottom: 16px; }
.gm-fill-hint {
    font-size: 14px;
    color: var(--gm-indigo-mid);
    font-style: italic;
    margin: 12px 0 0;
}

/* BLOCKQUOTE — closing quote pattern */
.gm-blockquote {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    line-height: 1.5;
    color: var(--gm-indigo);
    font-style: italic;
    margin: 24px 0 8px;
}
.gm-attribution {
    font-size: 14px;
    color: var(--gm-indigo-mid);
    margin: 0 0 12px;
    letter-spacing: 0.05em;
}

/* HERO TYPOGRAPHY — used by [gm_hero] (already has .gm-hero-* classes; ensure they have the right look) */
.gm-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.15;
    color: var(--gm-indigo);
    margin: 0 0 20px;
    font-weight: 700;
}
.gm-hero-subtitle {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 19px;
    line-height: 1.6;
    color: var(--gm-ink);
    max-width: 640px;
    margin: 0 auto 32px;
}
.gm-hero-tagline {
    font-size: 13px;
    color: var(--gm-indigo-mid);
    font-style: italic;
    margin: 16px 0 0;
}
.gm-hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.gm-label {
    font-size: 12px;
    color: var(--gm-honey-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin: 0 0 8px;
}

/* SECTION TITLES + body */
.gm-section-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--gm-indigo);
    margin: 0 0 12px;
    font-weight: 600;
    line-height: 1.2;
}
.gm-body {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--gm-ink);
    margin: 0 0 16px;
}
.gm-pull-quote {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    line-height: 1.4;
    color: var(--gm-indigo);
    font-style: italic;
    text-align: center;
    margin: 24px 0;
    font-weight: 600;
}