/* ========================================
   MMGD BRANDING TOKENS
======================================== */

.brand-typography--serif-led {
  --brand-title-font: var(--font-body);
  --brand-body-font: var(--font-body);
  --brand-meta-font: var(--font-ui);
}

.brand-typography--screen-led {
  --brand-title-font: var(--font-ui);
  --brand-body-font: var(--font-body);
  --brand-meta-font: var(--font-ui);
}

.brand-typography--mono-mixed {
  --brand-title-font: var(--font-ui);
  --brand-body-font: var(--font-ui);
  --brand-meta-font: var(--font-ui);
  --brand-title-tracking: -0.035em;
}

.brand-density--airy {
  --brand-flow-gap: 3.2rem;
  --brand-card-gap: 1.15rem;
  --brand-card-padding: 1.45rem;
}

.brand-density--balanced {
  --brand-flow-gap: 2.5rem;
  --brand-card-gap: 1rem;
  --brand-card-padding: 1.3rem;
}

.brand-density--compact {
  --brand-flow-gap: 1.8rem;
  --brand-card-gap: 0.75rem;
  --brand-card-padding: 1rem;
  --brand-card-min-height: 10rem;
}

.brand-image--frame {
  --brand-image-ratio: 5 / 4;
  --brand-image-fit: cover;
}

.brand-image--portrait {
  --brand-image-ratio: 4 / 5;
  --brand-image-fit: cover;
}

.brand-image--landscape {
  --brand-image-ratio: 16 / 9;
  --brand-image-fit: cover;
}

.brand-image--sequence {
  --brand-image-ratio: 3 / 2;
  --brand-image-fit: cover;
}

.brand-composition--stacked {
  --brand-reading-columns: minmax(0, 1fr);
}

.brand-composition--split {
  --brand-reading-columns: minmax(0, 1fr) minmax(16rem, var(--brand-reading-aside-width));
}

.brand-composition--rail {
  --brand-reading-columns: minmax(0, 0.95fr) minmax(14rem, var(--brand-reading-aside-width));
}

.brand-color--neutral {
  --brand-accent: rgba(255, 255, 255, 0.22);
  --brand-accent-soft: rgba(255, 255, 255, 0.08);
  --brand-accent-strong: rgba(255, 255, 255, 0.84);
  --brand-panel-line: rgba(255, 255, 255, 0.12);
  --brand-panel-line-strong: rgba(255, 255, 255, 0.22);
}

.brand-color--archive {
  --brand-accent: color-mix(in srgb, var(--palette-ecru) 60%, var(--color-paper));
  --brand-accent-soft: color-mix(in srgb, var(--palette-ecru) 14%, transparent);
  --brand-accent-strong: color-mix(in srgb, var(--palette-ecru) 78%, var(--color-paper));
  --brand-panel-line: color-mix(in srgb, var(--palette-ecru) 22%, transparent);
  --brand-panel-line-strong: color-mix(in srgb, var(--palette-ecru) 38%, transparent);
}

.brand-color--essay {
  --brand-accent: color-mix(in srgb, var(--palette-pale-lemon-yellow) 58%, var(--color-paper));
  --brand-accent-soft: color-mix(in srgb, var(--palette-pale-lemon-yellow) 12%, transparent);
  --brand-accent-strong: color-mix(in srgb, var(--palette-pale-lemon-yellow) 82%, var(--color-paper));
  --brand-panel-line: color-mix(in srgb, var(--palette-pale-lemon-yellow) 20%, transparent);
  --brand-panel-line-strong: color-mix(in srgb, var(--palette-pale-lemon-yellow) 30%, transparent);
}

.brand-color--atlas {
  --brand-accent: color-mix(in srgb, var(--palette-cerulian-blue) 54%, var(--color-paper));
  --brand-accent-soft: color-mix(in srgb, var(--palette-cerulian-blue) 16%, transparent);
  --brand-accent-strong: color-mix(in srgb, var(--palette-cerulian-blue) 76%, var(--color-paper));
  --brand-panel-line: color-mix(in srgb, var(--palette-cerulian-blue) 24%, transparent);
  --brand-panel-line-strong: color-mix(in srgb, var(--palette-cerulian-blue) 36%, transparent);
}

.brand-color--civic {
  --brand-accent: color-mix(in srgb, var(--palette-neutral-gray) 48%, var(--color-paper));
  --brand-accent-soft: color-mix(in srgb, var(--palette-neutral-gray) 14%, transparent);
  --brand-accent-strong: color-mix(in srgb, var(--palette-neutral-gray) 76%, var(--color-paper));
  --brand-panel-line: color-mix(in srgb, var(--palette-neutral-gray) 20%, transparent);
  --brand-panel-line-strong: color-mix(in srgb, var(--palette-neutral-gray) 34%, transparent);
}

.brand-color--signal {
  --brand-accent: color-mix(in srgb, var(--palette-orange-yellow) 66%, var(--color-paper));
  --brand-accent-soft: color-mix(in srgb, var(--palette-orange-yellow) 18%, transparent);
  --brand-accent-strong: color-mix(in srgb, var(--palette-orange-yellow) 88%, var(--color-paper));
  --brand-panel-line: color-mix(in srgb, var(--palette-orange-yellow) 34%, transparent);
  --brand-panel-line-strong: color-mix(in srgb, var(--palette-orange-yellow) 58%, transparent);
}

.brand-ornament--none {
  --brand-divider-style: none;
}

.brand-ornament--rules {
  --brand-divider-style: solid;
}

.brand-ornament--grid {
  --brand-divider-style: dotted;
}

.brand-ornament--corner {
  --brand-divider-style: double;
}

.brand-motion--still {
  --brand-motion-duration: 0ms;
}

.brand-motion--calm {
  --brand-motion-duration: 180ms;
}

.brand-motion--crisp {
  --brand-motion-duration: 120ms;
}

.brand-ui--quiet {
  --brand-button-surface: transparent;
}

.brand-ui--outlined {
  --brand-button-surface: color-mix(in srgb, var(--surface) 96%, transparent);
}

.brand-ui--instrumental {
  --brand-button-surface: color-mix(in srgb, var(--surface-soft) 92%, transparent);
}

.brand-ui--signal {
  --brand-button-surface: var(--brand-accent-soft);
}

.brand-reading--essay {
  --brand-reading-measure: 42rem;
  --brand-reading-aside-width: 20rem;
}

.brand-reading--atlas {
  --brand-reading-measure: 38rem;
  --brand-reading-aside-width: 23rem;
}

.brand-reading--dossier {
  --brand-reading-measure: 39rem;
  --brand-reading-aside-width: 18rem;
}

.brand-reading--annotation {
  --brand-reading-measure: 36rem;
  --brand-reading-aside-width: 17rem;
}

.brand-reading--compact {
  --brand-reading-measure: 34rem;
  --brand-reading-aside-width: 16rem;
}

.brand-card--stacked {
  --brand-card-padding: max(1.1rem, var(--brand-card-padding));
}

.brand-card--framed {
  --brand-card-padding: max(1.25rem, var(--brand-card-padding));
  --brand-panel-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-panel-line) 78%, transparent);
}

.brand-card--lined {
  --brand-card-padding: max(1rem, var(--brand-card-padding));
}

.brand-card--poster {
  --brand-card-padding: max(1.35rem, var(--brand-card-padding));
}

.brand-headline--serif-display {
  --brand-title-size: clamp(3rem, 5.8vw, 5.5rem);
  --brand-title-font: var(--font-body);
}

.brand-headline--screen-display {
  --brand-title-size: clamp(2.6rem, 5vw, 4.6rem);
  --brand-title-font: var(--font-ui);
}

.brand-headline--mono-display {
  --brand-title-size: clamp(2.3rem, 4.2vw, 4rem);
  --brand-title-font: var(--font-ui);
  --brand-title-tracking: -0.03em;
}

.brand-headline--poster-display {
  --brand-title-size: clamp(3.35rem, 7vw, 6.4rem);
  --brand-title-font: var(--font-ui);
  --brand-title-line-height: 0.88;
  --brand-title-tracking: -0.06em;
}

.brand-surface--flat {
  --brand-panel-bg: color-mix(in srgb, var(--surface) 90%, transparent);
  --brand-panel-bg-strong: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  --brand-panel-radius: 18px;
}

.brand-surface--elevated {
  --brand-panel-bg: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  --brand-panel-bg-strong: color-mix(in srgb, var(--surface-soft) 96%, transparent);
  --brand-panel-radius: 20px;
  --brand-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.brand-surface--paper {
  --brand-panel-bg: color-mix(in srgb, var(--surface-soft) 84%, var(--color-paper));
  --brand-panel-bg-strong: color-mix(in srgb, var(--surface-soft) 78%, var(--color-paper));
  --brand-panel-radius: 14px;
}

.brand-surface--glass {
  --brand-panel-bg: color-mix(in srgb, var(--surface-soft) 80%, transparent);
  --brand-panel-bg-strong: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  --brand-panel-radius: 24px;
  --brand-panel-shadow: 0 14px 42px rgba(0, 0, 0, 0.2);
}

.brand-border--hairline {
  --brand-border-width: 1px;
}

.brand-border--outline {
  --brand-border-width: 1.5px;
}

.brand-border--heavy {
  --brand-border-width: 2px;
  --brand-panel-radius: 10px;
}

.brand-rhythm--loose {
  --brand-section-gap: clamp(2.8rem, 4vw, 4rem);
  --brand-body-line-height: 1.78;
}

.brand-rhythm--measured {
  --brand-section-gap: clamp(2.4rem, 3vw, 3.4rem);
  --brand-body-line-height: 1.72;
}

.brand-rhythm--tight {
  --brand-section-gap: clamp(1.8rem, 2.2vw, 2.6rem);
  --brand-body-line-height: 1.6;
}