@font-face {
  font-family: "Inter Display";
  src: url("/assets/standon-next/fonts/inter-display-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 500;
}

@font-face {
  font-family: "Inter Display";
  src: url("/assets/standon-next/fonts/inter-display-600.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Inter Display";
  src: url("/assets/standon-next/fonts/inter-display-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/standon-next/fonts/geist-mono-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root,
[data-brand="standon"] {
  /*
   * Standon visual foundation.
   * The public system is deliberately neutral: warm paper, near-black ink,
   * soft sage surfaces and very little decorative colour.
   */
  --brand-cobalt: #1a1a1a;
  --brand-cobalt-deep: #0f0f0f;
  --brand-violet: #5f625c;
  --brand-light-blue: #eef0ea;
  --brand-growth: #42665a;
  --brand-insight: #7a653d;
  --brand-mist: #eef0ea;
  --brand-mist-mid: #dfe2da;
  --brand-ink: #1a1a1a;
  --brand-paper: #fbfcf8;
  --brand-white: #ffffff;

  /* Descriptive primitives for all new work. */
  --brand-deep: var(--brand-cobalt-deep);
  --brand-muted: var(--brand-violet);
  --brand-sage: var(--brand-light-blue);
  --brand-sage-mid: var(--brand-mist-mid);

  /* Compatibility aliases. New work uses the descriptive primitives above. */
  --brand-blue: var(--brand-cobalt);
  --brand-blue-deep: var(--brand-cobalt-deep);
  --brand-action: var(--brand-cobalt);
  --brand-lift: var(--brand-violet);

  /* Compatibility spectrum: intentionally restrained and near-neutral. */
  --brand-spectrum-cobalt: var(--brand-cobalt);
  --brand-spectrum-violet: var(--brand-violet);
  --brand-spectrum-light-blue: var(--brand-light-blue);

  /* Deprecated aliases retained so older surfaces inherit the approved palette. */
  --brand-spectrum-cyan: var(--brand-light-blue);
  --brand-spectrum-coral: var(--brand-violet);
  --brand-spectrum-apricot: var(--brand-light-blue);
  --brand-spectrum-lime: var(--brand-light-blue);

  /* Concept aliases used by the brand system. */
  --brand-foundation: var(--brand-blue);
  --brand-foundation-deep: var(--brand-blue-deep);
  --brand-signal: var(--brand-lift);
  --brand-progress: var(--brand-growth);
  --brand-learning: var(--brand-insight);
  --brand-sky: var(--brand-mist);
  --brand-sky-mid: var(--brand-mist-mid);

  --brand-cobalt-rgb: 26, 26, 26;
  --brand-cobalt-deep-rgb: 15, 15, 15;
  --brand-violet-rgb: 95, 98, 92;
  --brand-light-blue-rgb: 238, 240, 234;
  --brand-blue-rgb: var(--brand-cobalt-rgb);
  --brand-blue-deep-rgb: var(--brand-cobalt-deep-rgb);
  --brand-action-rgb: var(--brand-cobalt-rgb);
  --brand-lift-rgb: var(--brand-violet-rgb);
  --brand-growth-rgb: 66, 102, 90;
  --brand-insight-rgb: 122, 101, 61;
  --brand-mist-rgb: 238, 240, 234;
  --brand-mist-mid-rgb: 223, 226, 218;
  --brand-sky-rgb: var(--brand-mist-rgb);
  --brand-sky-mid-rgb: var(--brand-mist-mid-rgb);
  --brand-ink-rgb: 26, 26, 26;
  --brand-paper-rgb: 251, 252, 248;
  --brand-white-rgb: 255, 255, 255;
  --brand-deep-rgb: var(--brand-cobalt-deep-rgb);
  --brand-muted-rgb: var(--brand-violet-rgb);
  --brand-sage-rgb: var(--brand-light-blue-rgb);
  --brand-sage-mid-rgb: var(--brand-mist-mid-rgb);
  --brand-spectrum-cobalt-rgb: var(--brand-cobalt-rgb);
  --brand-spectrum-violet-rgb: var(--brand-violet-rgb);
  --brand-spectrum-light-blue-rgb: var(--brand-light-blue-rgb);
  --brand-spectrum-cyan-rgb: var(--brand-light-blue-rgb);
  --brand-spectrum-coral-rgb: var(--brand-violet-rgb);
  --brand-spectrum-apricot-rgb: var(--brand-light-blue-rgb);
  --brand-spectrum-lime-rgb: var(--brand-light-blue-rgb);

  /* Support accents communicate state or course category, never decoration. */
  --accent-blue: var(--brand-action);
  --accent-blue-dark: var(--brand-blue);
  --accent-cyan: var(--brand-cobalt);
  --accent-teal: var(--brand-growth);
  --accent-green: var(--brand-growth);
  --accent-yellow: var(--brand-insight);
  --accent-orange: var(--brand-insight);
  --accent-red: #a43f45;
  --accent-pink: var(--brand-lift);
  --accent-violet: var(--brand-violet);

  --accent-blue-rgb: var(--brand-action-rgb);
  --accent-blue-dark-rgb: var(--brand-blue-rgb);
  --accent-cyan-rgb: var(--brand-cobalt-rgb);
  --accent-teal-rgb: var(--brand-growth-rgb);
  --accent-green-rgb: var(--brand-growth-rgb);
  --accent-yellow-rgb: var(--brand-insight-rgb);
  --accent-orange-rgb: var(--brand-insight-rgb);
  --accent-red-rgb: 164, 63, 69;
  --accent-pink-rgb: var(--brand-lift-rgb);
  --accent-violet-rgb: var(--brand-violet-rgb);

  /* One crisp grotesk family carries display and interface roles. */
  --font-ui: "Inter Display", Inter, "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter Display", Inter, "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-caption-size: 12px;
  --text-caption-line: 16px;
  --text-small-size: 15px;
  --text-small-line: 22px;
  --text-body-size: 18px;
  --text-body-line: 27px;
  --text-lead-size: 20px;
  --text-lead-line: 30px;
  --text-card-title-size: 28px;
  --text-card-title-line: 34px;
  --text-section-title-size: 56px;
  --text-section-title-line: 59px;
  --text-page-title-size: 56px;
  --text-page-title-line: 60px;
  --text-hero-size: 58px;
  --text-hero-line: 64px;
  --text-wordmark-size: 20px;
  --text-wordmark-line: 24px;

  /* Semantic roles. */
  --color-bg: var(--brand-paper);
  --color-bg-brand: var(--brand-blue);
  --color-bg-inverse: var(--brand-ink);
  --color-surface: rgba(var(--brand-white-rgb), 0.94);
  --color-surface-solid: var(--brand-white);
  --color-surface-soft: rgba(var(--brand-mist-rgb), 0.9);
  --color-surface-brand: var(--brand-mist);
  --color-surface-inverse: var(--brand-ink);

  --color-text: var(--brand-ink);
  --color-text-muted: rgba(var(--brand-ink-rgb), 0.68);
  --color-text-soft: rgba(var(--brand-ink-rgb), 0.52);
  --color-text-inverse: var(--brand-paper);
  --color-text-inverse-muted: rgba(var(--brand-paper-rgb), 0.72);

  --color-border: rgba(var(--brand-ink-rgb), 0.1);
  --color-border-strong: rgba(var(--brand-ink-rgb), 0.18);
  --color-border-inverse: rgba(var(--brand-paper-rgb), 0.18);

  --color-accent: var(--brand-blue);
  --color-accent-hover: var(--brand-blue-deep);
  --color-accent-soft: rgba(var(--brand-light-blue-rgb), 0.28);
  --color-focus: var(--brand-action);
  --color-highlight: var(--brand-lift);
  --color-success: var(--brand-growth);
  --color-warning: var(--brand-insight);
  --color-shadow: rgba(var(--brand-ink-rgb), 0.12);

  --button-primary-bg: var(--brand-blue);
  --button-primary-text: var(--brand-white);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-text);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --nav-bg: var(--brand-paper);
  --nav-text: var(--color-text-muted);
  --nav-active-bg: var(--brand-mist);
  --nav-active-text: var(--color-text);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-soft: 0 12px 36px rgba(var(--brand-ink-rgb), 0.055);
  --shadow-panel: 0 24px 64px rgba(var(--brand-ink-rgb), 0.11);

  /* Motion is quiet, fast and optional. */
  --motion-instant: 80ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-ui: 200ms;
  --motion-enter: 600ms;
  --motion-intro: 720ms;
  --motion-slow: 560ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

@media (max-width: 720px) {
  :root,
  [data-brand="standon"] {
    --text-small-size: 15px;
    --text-small-line: 22px;
    --text-body-size: 17px;
    --text-body-line: 26px;
    --text-lead-size: 19px;
    --text-lead-line: 28px;
    --text-card-title-size: 24px;
    --text-card-title-line: 29px;
    --text-section-title-size: 42px;
    --text-section-title-line: 45px;
    --text-page-title-size: 46px;
    --text-page-title-line: 49px;
    --text-hero-size: 46px;
    --text-hero-line: 49px;
    --text-wordmark-size: 16px;
    --text-wordmark-line: 20px;
  }
}

[data-theme="dark"] {
  --color-bg: var(--brand-ink);
  --color-bg-brand: var(--brand-blue-deep);
  --color-bg-inverse: var(--brand-paper);
  --color-surface: rgba(var(--brand-paper-rgb), 0.06);
  --color-surface-solid: var(--brand-ink);
  --color-surface-soft: rgba(var(--brand-paper-rgb), 0.08);
  --color-surface-brand: rgba(var(--brand-action-rgb), 0.16);
  --color-surface-inverse: var(--brand-paper);

  --color-text: var(--brand-paper);
  --color-text-muted: rgba(var(--brand-paper-rgb), 0.72);
  --color-text-soft: rgba(var(--brand-paper-rgb), 0.5);
  --color-text-inverse: var(--brand-ink);
  --color-text-inverse-muted: rgba(var(--brand-ink-rgb), 0.66);

  --color-border: rgba(var(--brand-paper-rgb), 0.15);
  --color-border-strong: rgba(var(--brand-paper-rgb), 0.28);
  --color-border-inverse: rgba(var(--brand-ink-rgb), 0.17);
  --color-shadow: rgba(0, 0, 0, 0.36);

  --button-primary-bg: var(--brand-paper);
  --button-primary-text: var(--brand-ink);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--brand-paper);

  --card-bg: rgba(var(--brand-paper-rgb), 0.06);
  --card-border: var(--color-border);
  --nav-bg: var(--brand-ink);
  --nav-text: var(--color-text-muted);
  --nav-active-bg: rgba(var(--brand-paper-rgb), 0.08);
  --nav-active-text: var(--brand-paper);
}