/* ==========================================================================
   Madhoo Works — design tokens
   --------------------------------------------------------------------------
   Every hex value below is copied verbatim from the design-token CSS file
   supplied in the project's "Colour Tokens" folder. No colour is invented,
   approximated, blended, derived through opacity, or sampled from screenshot
   anti-aliasing. Semantic roles are pointers only: each one resolves to a
   supplied token.
   ========================================================================== */

/* ---------- self-hosted fallback faces (no licensed originals supplied) ---- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/space-grotesk-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ---------- raw palette: the only permitted colour source --------------- */
  --white: #FCFAF8;
  --black: #161008;

  --pink-10: #FFDFEF;
  --pink-20: #FFC2E1;
  --pink-40: #FF77C9;
  --pink-100: #322312;

  --purple-10: #EEE2FF;
  --purple-20: #E2C9F8;
  --purple-40: #DE8AFF;
  --purple-100: #470B64;
  --purple-calculator-panel: #EBDDFE;

  --orange-10: #FFDCD9;
  --orange-20: #FFC2AD;
  --orange-40: #FD8565;
  --orange-100: #4F192A;

  --green-10: #DFFFCC;
  --green-20: #C8FAAE;
  --green-40: #9FE878;
  --green-100: #21351A;

  /* ---------- live pointer, reassigned per theme ------------------------- */
  --current-color-10: var(--pink-10);
  --current-color-20: var(--pink-20);
  --current-color-40: var(--pink-40);
  --current-color-100: var(--pink-100);

  /* ---------- typography ------------------------------------------------- */
  --font-display: 'GT Planar', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'GT Planar', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'ABC Repro Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-ui: 'Suisse Int\'l', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --letter-spacing-tight: -0.04em;
  --letter-spacing-mid: -0.02em;

  --display-hero: clamp(3.2rem, 7.2vw, 8.5rem);
  --display-section: clamp(2.4rem, 5.2vw, 6.4rem);
  --display-statement: clamp(2rem, 4.4vw, 5.2rem);
  --heading-card: clamp(1.45rem, 2.2vw, 2.75rem);
  --body-lg: clamp(1.05rem, 1.35vw, 1.5rem);
  --body: clamp(0.98rem, 1vw, 1.15rem);
  --label: clamp(0.66rem, 0.65vw, 0.78rem);

  /* ---------- motion ----------------------------------------------------- */
  --transition-color-duration: 0.3s;
  --transition-color-easing: cubic-bezier(.59, .06, .1, 1);
  --ease-custom: cubic-bezier(.79, 0, .06, 1);

  /* ---------- shape and rhythm ------------------------------------------- */
  --radius-pill: 10px;
  --radius-card: 12px;
  --radius-panel: 28px;
  --radius-tile: 8px;
  --hex-button-size: 62px;

  --gutter: clamp(20px, 3vw, 64px);
  --shell: 1380px;
  --nav-height: 68px;
  --nav-offset: 18px;
  --section-space: clamp(5.5rem, 11vh, 9.5rem);
  --anchor-offset: calc(var(--nav-height) + var(--nav-offset) + 28px);
}

/* ==========================================================================
   Section theme states
   Each block reassigns the live pointer AND every semantic text/UI role, so
   nothing in a section carries a hard-coded colour and content is born in the
   correct colour rather than transitioning into it.
   ========================================================================== */

[data-theme='pink'] {
  --current-color-10: var(--pink-10);
  --current-color-20: var(--pink-20);
  --current-color-40: var(--pink-40);
  --current-color-100: var(--pink-100);
}
[data-theme='purple'] {
  --current-color-10: var(--purple-10);
  --current-color-20: var(--purple-20);
  --current-color-40: var(--purple-40);
  --current-color-100: var(--purple-100);
}
[data-theme='orange'] {
  --current-color-10: var(--orange-10);
  --current-color-20: var(--orange-20);
  --current-color-40: var(--orange-40);
  --current-color-100: var(--orange-100);
}
[data-theme='green'] {
  --current-color-10: var(--green-10);
  --current-color-20: var(--green-20);
  --current-color-40: var(--green-40);
  --current-color-100: var(--green-100);
}

/* ---------- pink -------------------------------------------------------- */

[data-theme='pink'][data-tone='dark'] {
  --section-bg: var(--pink-100);
  --text-display: var(--pink-40);
  --text-body: var(--pink-40);
  --text-label: var(--pink-40);
  --text-emphasis: var(--pink-10);
  --text-fill-from: var(--pink-10);
  --text-quiet: var(--pink-10);
  --panel-bg: var(--pink-20);
  --panel-ink: var(--pink-100);
  --card-bg: var(--pink-100);
  --card-ink: var(--pink-10);
  --card-accent: var(--pink-40);
  --control-bg: var(--pink-10);
  --control-text: var(--pink-100);
  --control-alt-bg: var(--pink-40);
  --control-alt-text: var(--pink-100);
  --border-color: var(--pink-40);
  --shape-color: var(--pink-40);
  --shape-color-alt: var(--pink-20);
  --focus-color: var(--pink-10);
}

[data-theme='pink'][data-tone='light'] {
  --section-bg: var(--pink-10);
  --text-display: var(--pink-100);
  --text-body: var(--pink-100);
  --text-label: var(--pink-100);
  --text-emphasis: var(--pink-40);
  --text-fill-from: var(--pink-40);
  --text-quiet: var(--pink-100);
  --panel-bg: var(--pink-20);
  --panel-ink: var(--pink-100);
  --card-bg: var(--pink-20);
  --card-ink: var(--pink-100);
  --card-accent: var(--pink-40);
  --control-bg: var(--pink-100);
  --control-text: var(--pink-10);
  --control-alt-bg: var(--pink-40);
  --control-alt-text: var(--pink-100);
  --border-color: var(--pink-100);
  --shape-color: var(--pink-40);
  --shape-color-alt: var(--pink-20);
  --focus-color: var(--pink-100);
}

/* ---------- purple ------------------------------------------------------ */

[data-theme='purple'][data-tone='dark'] {
  --section-bg: var(--purple-100);
  --text-display: var(--purple-10);
  --text-body: var(--purple-10);
  --text-label: var(--purple-40);
  --text-emphasis: var(--purple-40);
  --text-fill-from: var(--purple-40);
  --text-quiet: var(--purple-10);
  --panel-bg: var(--purple-20);
  --panel-ink: var(--purple-100);
  --card-bg: var(--purple-40);
  --card-ink: var(--purple-100);
  --card-accent: var(--purple-100);
  --control-bg: var(--purple-10);
  --control-text: var(--purple-100);
  --control-alt-bg: var(--purple-40);
  --control-alt-text: var(--purple-100);
  --border-color: var(--purple-40);
  --shape-color: var(--purple-40);
  --shape-color-alt: var(--purple-20);
  --focus-color: var(--purple-10);
}

[data-theme='purple'][data-tone='light'] {
  --section-bg: var(--purple-10);
  --text-display: var(--purple-100);
  --text-body: var(--purple-100);
  --text-label: var(--purple-100);
  --text-emphasis: var(--purple-40);
  --text-fill-from: var(--purple-40);
  --text-quiet: var(--purple-100);
  --panel-bg: var(--purple-20);
  --panel-ink: var(--purple-100);
  --card-bg: var(--purple-calculator-panel);
  --card-ink: var(--purple-100);
  --card-accent: var(--purple-40);
  --control-bg: var(--purple-100);
  --control-text: var(--purple-10);
  --control-alt-bg: var(--purple-40);
  --control-alt-text: var(--purple-100);
  --border-color: var(--purple-100);
  --shape-color: var(--purple-40);
  --shape-color-alt: var(--purple-20);
  --focus-color: var(--purple-100);
}

/* ---------- orange / maroon --------------------------------------------- */

[data-theme='orange'][data-tone='dark'] {
  --section-bg: var(--orange-100);
  --text-display: var(--orange-40);
  --text-body: var(--orange-10);
  --text-label: var(--orange-40);
  --text-emphasis: var(--orange-10);
  --text-fill-from: var(--orange-10);
  --text-quiet: var(--orange-10);
  --panel-bg: var(--orange-10);
  --panel-ink: var(--orange-100);
  --card-bg: var(--orange-10);
  --card-ink: var(--orange-100);
  --card-accent: var(--orange-40);
  --control-bg: var(--orange-10);
  --control-text: var(--orange-100);
  --control-alt-bg: var(--orange-40);
  --control-alt-text: var(--orange-100);
  --border-color: var(--orange-40);
  --shape-color: var(--orange-40);
  --shape-color-alt: var(--orange-20);
  --focus-color: var(--orange-10);
}

[data-theme='orange'][data-tone='light'] {
  --section-bg: var(--orange-20);
  --text-display: var(--orange-100);
  --text-body: var(--orange-100);
  --text-label: var(--orange-100);
  --text-emphasis: var(--orange-40);
  --text-fill-from: var(--orange-40);
  --text-quiet: var(--orange-100);
  --panel-bg: var(--orange-10);
  --panel-ink: var(--orange-100);
  --card-bg: var(--orange-10);
  --card-ink: var(--orange-100);
  --card-accent: var(--orange-40);
  --control-bg: var(--orange-100);
  --control-text: var(--orange-10);
  --control-alt-bg: var(--orange-40);
  --control-alt-text: var(--orange-100);
  --border-color: var(--orange-100);
  --shape-color: var(--orange-40);
  --shape-color-alt: var(--orange-10);
  --focus-color: var(--orange-100);
}

/* ---------- green ------------------------------------------------------- */

[data-theme='green'][data-tone='dark'] {
  --section-bg: var(--green-100);
  --text-display: var(--green-40);
  --text-body: var(--green-10);
  --text-label: var(--green-40);
  --text-emphasis: var(--green-10);
  --text-fill-from: var(--green-10);
  --text-quiet: var(--green-10);
  --panel-bg: var(--green-10);
  --panel-ink: var(--green-100);
  --card-bg: var(--green-10);
  --card-ink: var(--green-100);
  --card-accent: var(--green-40);
  --control-bg: var(--green-10);
  --control-text: var(--green-100);
  --control-alt-bg: var(--green-40);
  --control-alt-text: var(--green-100);
  --border-color: var(--green-40);
  --shape-color: var(--green-40);
  --shape-color-alt: var(--green-20);
  --focus-color: var(--green-10);
}

[data-theme='green'][data-tone='light'] {
  --section-bg: var(--green-10);
  --text-display: var(--green-100);
  --text-body: var(--green-100);
  --text-label: var(--green-100);
  --text-emphasis: var(--green-40);
  --text-fill-from: var(--green-40);
  --text-quiet: var(--green-100);
  --panel-bg: var(--green-20);
  --panel-ink: var(--green-100);
  --card-bg: var(--green-20);
  --card-ink: var(--green-100);
  --card-accent: var(--green-40);
  --control-bg: var(--green-100);
  --control-text: var(--green-10);
  --control-alt-bg: var(--green-40);
  --control-alt-text: var(--green-100);
  --border-color: var(--green-100);
  --shape-color: var(--green-40);
  --shape-color-alt: var(--green-20);
  --focus-color: var(--green-100);
}

/* ==========================================================================
   Persistent navigation colour state.
   Driven from JS on the <html> element so the floating bar can change at the
   visual midpoint of a ribbon handoff, independently of section boundaries.
   ========================================================================== */

:root,
[data-nav-family='pink'] {
  --nav-bg: var(--pink-100);
  --nav-text: var(--pink-40);
  --nav-active: var(--pink-10);
  --nav-border: var(--pink-40);
  --nav-cta-bg: var(--pink-10);
  --nav-cta-text: var(--pink-100);
  --nav-focus: var(--pink-10);
}
[data-nav-family='purple'] {
  --nav-bg: var(--purple-100);
  --nav-text: var(--purple-40);
  --nav-active: var(--purple-10);
  --nav-border: var(--purple-40);
  --nav-cta-bg: var(--purple-10);
  --nav-cta-text: var(--purple-100);
  --nav-focus: var(--purple-10);
}
[data-nav-family='orange'] {
  --nav-bg: var(--orange-100);
  --nav-text: var(--orange-40);
  --nav-active: var(--orange-10);
  --nav-border: var(--orange-40);
  --nav-cta-bg: var(--orange-10);
  --nav-cta-text: var(--orange-100);
  --nav-focus: var(--orange-10);
}
[data-nav-family='green'] {
  --nav-bg: var(--green-100);
  --nav-text: var(--green-40);
  --nav-active: var(--green-10);
  --nav-border: var(--green-40);
  --nav-cta-bg: var(--green-10);
  --nav-cta-text: var(--green-100);
  --nav-focus: var(--green-10);
}