/* Manifesting Canvas product foundation.
   Scoped to the end-user shell so admin remains on its legacy system. */

body.product-page {
  --mc-ground: #f7f5ef;
  --mc-paper: #fbfaf6;
  --mc-paper-strong: #ffffff;
  --mc-ink: #082d52;
  --mc-ink-muted: #4c6378;
  --mc-ink-subtle: #6a7c8d;
  --mc-cobalt: #075cff;
  --mc-cobalt-hover: #004bd8;
  --mc-cobalt-pressed: #003cae;
  --mc-cobalt-soft: #eaf1ff;
  --mc-coral: #ee6548;
  --mc-on-cobalt: #ffffff;
  --mc-line: #d8d8d1;
  --mc-line-strong: #b8c0c6;
  --mc-line-soft: rgb(8 45 82 / 8%);
  --mc-success: #176b47;
  --mc-success-soft: #e8f4ed;
  --mc-warning: #795300;
  --mc-warning-soft: #fff3d6;
  --mc-danger: #a42a25;
  --mc-danger-soft: #fbe9e7;
  --mc-info-soft: #eaf1ff;

  --mc-font-sans: "Overused Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --mc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --mc-weight-regular: 400;
  --mc-weight-medium: 500;
  --mc-weight-semibold: 600;
  --mc-weight-bold: 700;
  --mc-text-xs: 0.75rem;
  --mc-text-sm: 0.875rem;
  --mc-text-base: 1rem;
  --mc-text-lg: 1.125rem;
  --mc-text-xl: 1.25rem;
  --mc-text-2xl: 1.5rem;
  --mc-text-3xl: clamp(1.875rem, 3vw, 2.5rem);
  --mc-text-display: clamp(2.5rem, 6vw, 4.75rem);
  --mc-leading-tight: 1.08;
  --mc-leading-heading: 1.18;
  --mc-leading-body: 1.62;
  --mc-reading-width: 65ch;

  --mc-space-1: 0.25rem;
  --mc-space-2: 0.5rem;
  --mc-space-3: 0.75rem;
  --mc-space-4: 1rem;
  --mc-space-5: 1.25rem;
  --mc-space-6: 1.5rem;
  --mc-space-8: 2rem;
  --mc-space-10: 2.5rem;
  --mc-space-12: 3rem;
  --mc-space-16: 4rem;
  --mc-space-20: 5rem;
  --mc-space-24: 6rem;

  --mc-radius-control: 2px;
  --mc-radius-compact: 10px;
  --mc-radius-major: 18px;
  --mc-shadow-low: 0 2px 8px rgb(8 45 82 / 8%);
  --mc-shadow-medium: 0 10px 28px rgb(8 45 82 / 10%);
  --mc-shadow-high: 0 18px 50px rgb(8 45 82 / 13%);
  --mc-content-width: 80rem;
  --mc-wide-width: 90rem;
  --mc-page-gutter: clamp(1rem, 4vw, 3rem);

  --mc-motion-direct: 120ms;
  --mc-motion-state: 220ms;
  --mc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mc-focus-width: 2px;
  --mc-focus-offset: 3px;
  --mc-focus: 0 0 0 3px rgb(7 92 255 / 22%);
  --mc-target-comfortable: 44px;
  --mc-target-minimum: 24px;

  /* Temporary aliases let legacy product selectors inherit one system. */
  --font-body: var(--mc-font-sans);
  --font-heading: var(--mc-font-sans);
  --font-sans: var(--mc-font-sans);
  --font-brand: var(--mc-font-sans);
  --color-primary: var(--mc-cobalt);
  --color-primary-hover: var(--mc-cobalt-hover);
  --color-on-primary: var(--mc-on-cobalt);
  --color-text-primary: var(--mc-ink);
  --color-text-secondary: var(--mc-ink-muted);
  --color-text-tertiary: var(--mc-ink-subtle);
  --color-bg-primary: var(--mc-paper);
  --color-bg-secondary: var(--mc-ground);
  --color-bg-tertiary: #eeece5;
  --color-border-light: rgb(8 45 82 / 10%);
  --color-border-medium: rgb(8 45 82 / 18%);
  --primary-color: var(--mc-cobalt);
  --text-color: var(--mc-ink);
  --text-light: var(--mc-ink-muted);
  --border-color: var(--mc-line);
  --bg-light: var(--mc-ground);
  --white: var(--mc-paper);
  --shadow-xs: var(--mc-shadow-low);
  --shadow-sm: var(--mc-shadow-low);
  --shadow-md: var(--mc-shadow-high);
  --shadow-lg: var(--mc-shadow-high);
  --radius-sm: var(--mc-radius-control);
  --radius-md: var(--mc-radius-compact);
  --radius-lg: var(--mc-radius-major);
  --transition-fast: var(--mc-motion-direct) var(--mc-ease-standard);
  --transition-base: var(--mc-motion-state) var(--mc-ease-standard);
  --transition-slow: 350ms var(--mc-ease-standard);

  /* Compatibility tokens retained only for page-level product CSS while all
     routes converge on the same foundation values. */
  --space-1: var(--mc-space-1);
  --space-2: var(--mc-space-2);
  --space-3: var(--mc-space-3);
  --space-4: var(--mc-space-4);
  --space-5: var(--mc-space-5);
  --space-6: var(--mc-space-6);
  --space-8: var(--mc-space-8);
  --space-10: var(--mc-space-10);
  --space-12: var(--mc-space-12);
  --space-16: var(--mc-space-16);
  --text-xs: var(--mc-text-xs);
  --text-sm: var(--mc-text-sm);
  --text-base: var(--mc-text-base);
  --text-lg: var(--mc-text-lg);
  --text-xl: var(--mc-text-xl);
  --text-2xl: var(--mc-text-2xl);
  --text-4xl: 2.25rem;
  --type-caption: var(--mc-text-sm);
  --type-subtext: var(--mc-text-base);
  --type-body: var(--mc-text-base);
  --type-heading: var(--mc-text-2xl);
  --type-title: var(--mc-text-3xl);
  --type-display: var(--mc-text-display);
  --type-hero: var(--mc-text-display);
  --weight-semibold: var(--mc-weight-semibold);
  --weight-bold: var(--mc-weight-bold);
  --leading-title: var(--mc-leading-heading);
  --letter-spacing-heading: -0.035em;
  --neutral-50: #fafaf7;
  --neutral-100: #f1f0ea;
  --neutral-200: #e4e3dc;
  --neutral-300: #d2d3cf;
  --neutral-500: #697988;
  --neutral-600: #4c6378;
  --brand-blue-primary: var(--mc-ink);
  --brand-blue-dark: #061f38;
  --accent-50: rgb(7 92 255 / 6%);
  --accent-soft-bg: rgb(7 92 255 / 7%);
  --color-bg-card: var(--mc-paper);
  --color-danger: var(--mc-danger);
  --color-success: var(--mc-success);
  --color-warning: var(--mc-warning);
  --color-ink-strong: var(--mc-ink);
  --font-mono: var(--mc-font-mono);
  --surface-card: var(--mc-paper);
  --surface-muted: #f1f0ea;
  --surface-subtle: #f7f6f1;
  --page-gradient: var(--mc-ground);
  --panel-shadow: var(--mc-shadow-medium);
  --radius-xl: var(--mc-radius-major);
  --radius-2xl: var(--mc-radius-major);
  --radius-full: 999px;
  --radius-apple-l: var(--mc-radius-compact);
  --radius-apple-xl: var(--mc-radius-major);
  --rainbow-gradient: linear-gradient(90deg, #075cff, #7047eb, #ee6548);
  --header-clearance: 5.5rem;
  --header-shell-lift-offset: 0rem;
  --header-shell-visual-width: var(--mc-wide-width);

  min-block-size: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  color: var(--mc-ink);
  background: var(--mc-ground);
  font-family: var(--mc-font-sans);
  font-size: var(--mc-text-base);
  font-weight: var(--mc-weight-regular);
  line-height: var(--mc-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.product-page :where(
  h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote
) {
  margin: 0;
}

body.product-page :where(ul, ol) {
  padding: 0;
}

body.product-page .page-wrapper {
  display: flex;
  min-block-size: 100dvh;
  flex: 1 0 auto;
  flex-direction: column;
}

body.product-page .content-area,
body.product-page main {
  min-inline-size: 0;
}

body.product-page .content-area {
  flex: 1 0 auto;
}

body.product-page.product-route {
  overflow-x: clip;
}

body.product-page *,
body.product-page *::before,
body.product-page *::after {
  box-sizing: border-box;
}

/* The legacy page styles still contain direct Cabin, Outfit, and serif
   declarations. This scoped migration guard keeps every product text role on
   the approved family without affecting admin or the icon font. */
body.product-page *:not(.material-icons):not(.material-symbols-outlined),
body.product-page *:not(.material-icons):not(.material-symbols-outlined)::before,
body.product-page *:not(.material-icons):not(.material-symbols-outlined)::after {
  font-family: var(--mc-font-sans) !important;
}

body.product-page :where(.material-icons, .material-symbols-outlined) {
  font-family: "Material Icons" !important;
}

body.product-page :where(code, pre, kbd, samp) {
  font-family: var(--mc-font-mono) !important;
}

body.product-page :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

body.product-page :where(img, picture, svg, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

body.product-page :where(h1, h2, h3, h4) {
  color: var(--mc-ink);
  font-family: var(--mc-font-sans);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: -0.035em;
  line-height: var(--mc-leading-heading);
  text-wrap: balance;
}

body.product-page h1 {
  font-size: var(--mc-text-display);
  line-height: var(--mc-leading-tight);
}

body.product-page h2 {
  font-size: var(--mc-text-3xl);
}

body.product-page h3 {
  font-size: var(--mc-text-2xl);
  letter-spacing: -0.02em;
}

body.product-page :where(p, li, dd) {
  text-wrap: pretty;
}

body.product-page :where(.mc-reading-width, [data-reading-width]) {
  max-inline-size: var(--mc-reading-width);
}

body.product-page.product-page :where(a, button, input, select, textarea, summary,
  [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--mc-focus-width) solid var(--mc-cobalt) !important;
  outline-offset: var(--mc-focus-offset) !important;
}

body.product-page :where(button, [role="button"], .btn, .button) {
  min-block-size: var(--mc-target-comfortable);
}

body.product-page :where(input[type="checkbox"], input[type="radio"]) {
  min-block-size: var(--mc-target-minimum);
  min-inline-size: var(--mc-target-minimum);
}

body.product-page ::selection {
  color: var(--mc-ink);
  background: #cbdcff;
}

body.product-page.product-page--minimal {
  min-block-size: 100dvh;
}

/* The native hidden contract must outrank route-level display utilities. */
body.product-page [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.product-page {
    scroll-behavior: auto;
  }

  body.product-page *,
  body.product-page *::before,
  body.product-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body.product-page.product-page :where(a, button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible {
    outline-color: Highlight !important;
  }

  body.product-page .language-switch__option[aria-current="page"] {
    border: 1px solid CanvasText;
  }
}