/*
 * Brand Component Library — Aykua
 *
 * Three-layer CSS architecture:
 *   @layer base       — resets, typography defaults, focus styles
 *   @layer components — reusable UI patterns (buttons, cards, forms, etc.)
 *   @layer utilities   — layout helpers, animation classes
 *
 * Design philosophy:
 *   — Neumorphic: soft raised/inset shadows for interactive elements
 *   — Low contrast: backgrounds, surfaces, accents are all close in tone
 *   — Only text and icons provide strong contrast
 *   — Light mode = everything pale; dark mode = everything deep
 *   — Interactive elements raise on hover, sink on press
 *   — Non-interactive elements (cards, pills, badges) stay flat and subtle
 *
 * Depends on tokens.css (generated by build-tokens.py).
 * Works in static HTML, PureScript Elmish (React), and documents.
 */

@layer base, components, utilities;

/* ================================================================
   LAYER: BASE
   Typography, focus, and element-level defaults.
   ================================================================ */

@layer base {
  /* --- Acrylic glass tokens ---
     Single source of truth for frosted-glass surfaces.
     Referenced by .acrylic-panel, <ayk-bar>, and any
     element that needs the frosted backdrop effect. */
  :root {
    --acrylic-bg: var(--theme-bg);
    --acrylic-blur: 14px;
    --acrylic-strong-bg: var(--theme-surface);
    --acrylic-strong-blur: 18px;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--typography-font-family-sans);
    font-size: 16px;
    line-height: var(--typography-line-height-body, 1.7);
    font-weight: var(--typography-font-weight-light, 400);
    color: var(--theme-fg);
    background: var(--theme-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    padding: 0;
  }

  /* --- Headings --- */

  h1 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-bold, 700);
    letter-spacing: -0.02em;
  }

  h2 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-bold, 700);
    letter-spacing: -0.01em;
  }

  h3,
  h4,
  h5,
  h6 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-semibold, 600);
  }

  /* --- Links --- */

  a {
    color: var(--theme-primary);
    text-decoration: none;
  }

  a:hover {
    color: var(--theme-primary-hover);
    text-decoration: underline;
  }

  /* --- Focus --- */

  :focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 2px;
  }

  /* --- Images & media --- */

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

/* ================================================================
   LAYER: COMPONENTS
   Reusable UI patterns. Each component is self-contained and uses
   only token variables — no hard-coded values.

   All components respect the light/dark principle:
   — Light mode: surfaces, backgrounds, accents are pale. Only text is dark.
   — Dark mode: everything deep. Only text is light.
   ================================================================ */

@layer components {
  /* ----------------------------------------------------------
     Buttons
     Variants: .btn-primary, .btn-secondary, .btn-ghost
     Sizes:    .btn-sm, .btn-lg

     All buttons are surface-toned — they blend with the page.
     Differentiation comes from subtle tint differences, not
     contrasting dark/light backgrounds.

     Neumorphic interaction:
       Rest   → soft raised shadow, sits on the surface
       Hover  → enhanced shadow + slight lift (raises out of page)
       Active → inset shadow (sinks into page)
     ---------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--typography-font-weight-medium, 500);
    line-height: 1;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    transition:
      box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s ease;
  }

  .btn:hover {
    text-decoration: none;
  }

  /* Primary — the main action button.
     Surface-toned with a gentle tint towards the primary colour.
     Neumorphic shadow makes it feel raised and tactile. */
  .btn-primary {
    background: var(--theme-surface);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-primary:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-primary:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  /* Secondary — a subtler alternative to primary.
     Slightly different tint for visual hierarchy, but still
     surface-toned. No border, no outline. */
  .btn-secondary {
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-secondary:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-secondary:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  /* Ghost — no background, no shadow at rest.
     Appears on hover as a subtle surface lift. Lowest emphasis. */
  .btn-ghost {
    background: transparent;
    color: var(--theme-fg);
    box-shadow: none;
  }

  .btn-ghost:hover {
    background: var(--theme-bg-subtle);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(-1px);
  }

  .btn-ghost:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  /* Inverted — legacy alias, maps to btn-primary.
     No dark backgrounds exist so this is just another surface button. */
  .btn-inverted {
    background: var(--theme-surface);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-inverted:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-inverted:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  /* Size: small */
  .btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--typography-font-size-sm, 0.875rem);
  }

  /* Size: large */
  .btn-lg {
    padding: 1rem 2.5rem;
    font-size: var(--typography-font-size-lg, 1.125rem);
  }

  /* Legacy aliases — old class names map to new surface-toned system.
     .btn-solid .btn-light, .btn-solid .btn-dark, .btn-solid .btn-secondary
     all resolve to btn-primary (surface-toned, neumorphic). */
  .btn-solid,
  .btn-light,
  .btn-dark {
    background: var(--theme-surface);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-solid:hover,
  .btn-light:hover,
  .btn-dark:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-solid:active,
  .btn-light:active,
  .btn-dark:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  .btn-outline {
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-outline:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-outline:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  .btn-outline-light {
    background: var(--theme-surface);
    color: var(--theme-fg);
    box-shadow: var(--neu-raised-sm);
    transform: translateY(0);
  }

  .btn-outline-light:hover {
    box-shadow: var(--neu-raised);
    transform: translateY(-2px);
  }

  .btn-outline-light:active {
    box-shadow: var(--neu-inset-sm);
    transform: translateY(0);
  }

  /* ----------------------------------------------------------
     Pills / Badges
     Non-interactive labels. Flat and subtle — no shadows, no
     borders. They sit quietly on the surface.

     .pill      — for use on dark/hero backgrounds
     .pill-dark — for use on light/page backgrounds
     ---------------------------------------------------------- */

  .pill {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 9999px;
    background: var(--theme-bg-subtle);
    color: var(--theme-fg-muted);
    font-size: var(--typography-font-size-sm, 0.875rem);
    font-weight: var(--typography-font-weight-medium, 500);
    letter-spacing: 0.025em;
  }

  .pill-dark {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 9999px;
    background: var(--theme-bg-subtle);
    color: var(--theme-fg-muted);
    font-size: var(--typography-font-size-sm, 0.875rem);
    font-weight: var(--typography-font-weight-medium, 500);
    letter-spacing: 0.025em;
  }

  /* ----------------------------------------------------------
     Cards
     Non-interactive display surfaces — flat with subtle border.
     All cards are surface-toned — no dark cards in light mode.

     Base:        .card
     Feature:     .card-feature (subtle accent tint)
     Testimonial: .card-testimonial (playful rotation)
     ---------------------------------------------------------- */

  .card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 2rem;
  }

  .card-feature {
    background: var(--theme-accent);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 2rem;
  }

  .card-testimonial {
    border-radius: 1rem;
    padding: 2rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
  }

  @media (min-width: 1024px) {
    .card-testimonial {
      padding: 2.5rem;
    }
  }

  .card-testimonial:nth-child(odd) {
    transform: rotate(-1.5deg);
  }

  .card-testimonial:nth-child(even) {
    transform: rotate(1deg);
  }

  /* ----------------------------------------------------------
     Card: Emphasis — For content that needs visual weight.
     Uses a subtle tint rather than a dark background.
     In dark mode, slightly lighter than the page.
     In light mode, slightly deeper than the page.
     ---------------------------------------------------------- */

  .card-emphasis {
    position: relative;
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    border: none;
    border-radius: var(--border-radius-lg, 0.75rem);
    padding: 2rem;
    box-shadow: var(--neu-raised-sm);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .card-emphasis:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-raised);
  }

  .card-emphasis-number {
    font-size: var(--typography-font-size-xs, 0.75rem);
    font-weight: var(--typography-font-weight-bold, 700);
    color: var(--theme-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .card-emphasis p {
    color: var(--theme-fg-muted);
  }

  .card-emphasis-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--theme-secondary),
      var(--theme-accent)
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .card-emphasis:hover .card-emphasis-line {
    transform: scaleX(1);
  }

  /* Legacy: .card-dark maps to .card-emphasis for backward compat */
  .card-dark {
    position: relative;
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    border: none;
    border-radius: var(--border-radius-lg, 0.75rem);
    padding: 2rem;
    box-shadow: var(--neu-raised-sm);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .card-dark:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-raised);
  }

  .card-dark-number {
    font-size: var(--typography-font-size-xs, 0.75rem);
    font-weight: var(--typography-font-weight-bold, 700);
    color: var(--theme-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .card-dark h3,
  .card-dark h4 {
    color: var(--theme-fg);
  }

  .card-dark p {
    color: var(--theme-fg-muted);
  }

  .card-dark-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--theme-secondary),
      var(--theme-accent)
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .card-dark:hover .card-dark-line {
    transform: scaleX(1);
  }

  /* ----------------------------------------------------------
     Card: Stat — Metric/KPI display
     ---------------------------------------------------------- */

  .card-stat {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--border-radius-xl, 1rem);
    padding: 1.5rem;
    text-align: center;
  }

  .stat-value {
    display: block;
    font-family: var(--typography-font-family-heading);
    font-size: var(--typography-font-size-4xl, 2.25rem);
    font-weight: var(--typography-font-weight-bold, 700);
    line-height: var(--typography-line-height-tight, 1.25);
    color: var(--theme-fg);
  }

  .stat-label {
    display: block;
    font-size: var(--typography-font-size-sm, 0.875rem);
    color: var(--theme-fg-muted);
    margin-top: var(--spacing-2, 0.5rem);
  }

  .stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--typography-font-size-sm, 0.875rem);
    font-weight: var(--typography-font-weight-medium, 500);
    margin-top: var(--spacing-2, 0.5rem);
  }

  .stat-trend-up {
    color: var(--color-semantic-success, #88b3a4);
  }

  .stat-trend-down {
    color: var(--color-semantic-error, #e8ad80);
  }

  /* ----------------------------------------------------------
     Card: Media — Image + text
     ---------------------------------------------------------- */

  .card-media {
    background: var(--theme-surface);
    border: none;
    border-radius: var(--border-radius-xl, 1rem);
    overflow: hidden;
    box-shadow: var(--neu-raised-sm);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-media:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-raised-lg);
  }

  .card-media-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .card-media:hover .card-media-img {
    transform: scale(1.03);
  }

  .card-media-body {
    padding: 1.5rem;
  }

  .card-media-body h3,
  .card-media-body h4 {
    margin: 0 0 0.5rem;
  }

  .card-media-body p {
    margin: 0;
    font-size: var(--typography-font-size-sm, 0.875rem);
    color: var(--theme-fg-muted);
  }

  .card-media-meta {
    margin-top: var(--spacing-3, 0.75rem);
    font-size: var(--typography-font-size-xs, 0.75rem);
    color: var(--theme-fg-muted);
  }

  /* ----------------------------------------------------------
     Card: CTA — Call-to-action card/section
     Uses a subtle surface tint, not a strong colour block.
     ---------------------------------------------------------- */

  .card-cta {
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    border-radius: var(--border-radius-xl, 1rem);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--neu-raised);
  }

  .card-cta h2,
  .card-cta h3 {
    color: inherit;
    margin: 0 0 0.5rem;
  }

  .card-cta p {
    color: var(--theme-fg-muted);
    margin: 0 auto 1.5rem;
    max-width: 40ch;
  }

  .card-cta-primary {
    background: var(--theme-accent);
  }

  /* ----------------------------------------------------------
     Alerts — Notice/feedback messages
     Variants: .alert-info, .alert-success, .alert-warning, .alert-error

     Subtle inset shadow with a gentle tinted left border.
     ---------------------------------------------------------- */

  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3, 0.75rem);
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-lg, 0.75rem);
    border-left: 3px solid var(--theme-border);
    background: var(--theme-surface);
    box-shadow: var(--neu-inset-sm);
    font-size: var(--typography-font-size-sm, 0.875rem);
  }

  .alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
  }

  .alert-title {
    font-weight: var(--typography-font-weight-semibold, 600);
    margin-bottom: 0.25rem;
  }

  .alert-message {
    flex: 1;
    min-width: 0;
  }

  .alert-info {
    border-left-color: color-mix(
      in oklab,
      var(--color-semantic-info, #5e7d9c) 40%,
      var(--theme-bg)
    );
    background: color-mix(
      in oklab,
      var(--color-semantic-info, #5e7d9c) 4%,
      var(--theme-bg)
    );
  }

  .alert-success {
    border-left-color: color-mix(
      in oklab,
      var(--color-semantic-success, #88b3a4) 40%,
      var(--theme-bg)
    );
    background: color-mix(
      in oklab,
      var(--color-semantic-success, #88b3a4) 4%,
      var(--theme-bg)
    );
  }

  .alert-warning {
    border-left-color: color-mix(
      in oklab,
      var(--color-semantic-warning, #e4ce8b) 40%,
      var(--theme-bg)
    );
    background: color-mix(
      in oklab,
      var(--color-semantic-warning, #e4ce8b) 4%,
      var(--theme-bg)
    );
  }

  .alert-error {
    border-left-color: color-mix(
      in oklab,
      var(--color-semantic-error, #e8ad80) 40%,
      var(--theme-bg)
    );
    background: color-mix(
      in oklab,
      var(--color-semantic-error, #e8ad80) 4%,
      var(--theme-bg)
    );
  }

  /* ----------------------------------------------------------
     Panels — Content grouping containers
     Subtle border, no shadow — matches glassmorphic style.
     ---------------------------------------------------------- */

  .panel {
    border: 1px solid color-mix(in oklab, var(--theme-border) 40%, transparent);
    border-radius: var(--border-radius-xl, 1rem);
    padding: 2rem;
    background: var(--theme-surface);
  }

  .panel h3 {
    font-family: var(--typography-font-family-heading);
    font-size: var(--typography-font-size-base);
    font-weight: var(--typography-font-weight-bold);
    margin: 0 0 var(--spacing-4);
    color: var(--theme-fg);
  }

  .panel-accent {
    border-left: 3px solid
      color-mix(in oklab, var(--theme-secondary) 50%, var(--theme-bg));
    background: color-mix(in oklab, var(--theme-secondary) 3%, var(--theme-bg));
  }

  .panel-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .panel-split > img,
  .panel-split > picture,
  .panel-split > .panel-split-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .panel-split > :not(img):not(picture):not(.panel-split-media) {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  @media (max-width: 767px) {
    .panel-split {
      grid-template-columns: 1fr;
    }

    .panel-split > img,
    .panel-split > picture,
    .panel-split > .panel-split-media {
      aspect-ratio: 16 / 9;
    }
  }

  .panel-collapsible {
    padding: 0;
  }

  .panel-collapsible summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    font-weight: var(--typography-font-weight-semibold, 600);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .panel-collapsible summary::-webkit-details-marker {
    display: none;
  }

  .panel-collapsible summary::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: var(--typography-font-weight-bold, 700);
    color: var(--theme-fg-muted);
    transition: transform 0.2s ease;
  }

  .panel-collapsible[open] summary::after {
    content: "\2212";
  }

  .panel-collapsible .panel-collapsible-body {
    padding: 0 2rem 1.5rem;
  }

  /* Do / Don't usage panels — gentle tinted backgrounds */

  .panel-do {
    border-left: 3px solid
      color-mix(
        in oklab,
        var(--color-semantic-success, #88b3a4) 40%,
        var(--theme-bg)
      );
    background: color-mix(
      in oklab,
      var(--color-semantic-success, #88b3a4) 4%,
      var(--theme-bg)
    );
  }

  .panel-dont {
    border-left: 3px solid
      color-mix(
        in oklab,
        var(--color-semantic-error, #e8ad80) 40%,
        var(--theme-bg)
      );
    background: color-mix(
      in oklab,
      var(--color-semantic-error, #e8ad80) 4%,
      var(--theme-bg)
    );
  }

  .panel-do .panel-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: var(--typography-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-fg-muted);
    margin-bottom: 0.5rem;
  }

  .panel-dont .panel-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: var(--typography-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-fg-muted);
    margin-bottom: 0.5rem;
  }

  .panel-do ul,
  .panel-dont ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
  }

  .usage-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
  }

  @media (max-width: 640px) {
    .usage-pair {
      grid-template-columns: 1fr;
    }
  }

  /* ----------------------------------------------------------
     Form Controls
     .form-input, .form-select, .form-textarea, .form-checkbox

     Neumorphic: inputs use inset shadow (sunken into surface).
     On focus, a soft glow is layered over the inset.
     ---------------------------------------------------------- */

  .form-group {
    margin-bottom: 1rem;
  }

  .form-label {
    display: block;
    font-size: var(--typography-font-size-sm, 0.875rem);
    font-weight: var(--typography-font-weight-medium, 500);
    margin-bottom: 0.375rem;
    color: var(--theme-fg);
  }

  .form-input,
  .form-select,
  .form-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--theme-fg);
    background: var(--theme-surface);
    border: 1px solid color-mix(in oklab, var(--theme-border) 50%, transparent);
    border-radius: 0.5rem;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--theme-focus) 20%, transparent);
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--theme-fg-muted);
  }

  .form-textarea {
    resize: vertical;
    min-height: 6rem;
  }

  .form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--typography-font-size-sm, 0.875rem);
    cursor: pointer;
  }

  .form-checkbox input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--theme-primary);
    cursor: pointer;
  }

  /* ----------------------------------------------------------
     Logo — Composable brand mark
     Atomic pieces: .logo-icon (cross mark) + .logo-wordmark (text)
     Layouts:       .logo-horizontal, .logo-vertical
     ---------------------------------------------------------- */

  .logo {
    display: inline-flex;
    align-items: center;
    --logo-center: #185f42;
    --logo-mid: #598e7b;
    --logo-outer: #90bcac;
  }

  .logo-horizontal {
    flex-direction: row;
    gap: 0.75rem;
  }

  .logo-vertical {
    flex-direction: column;
    gap: 0.5rem;
  }

  .logo .logo-icon {
    flex-shrink: 0;
  }

  .logo .logo-icon svg {
    display: block;
    width: auto;
  }

  .logo .logo-wordmark svg {
    display: block;
    width: auto;
  }

  /* Default sizing — horizontal */
  .logo-horizontal .logo-icon svg {
    height: 2.5rem;
  }

  .logo-horizontal .logo-wordmark svg {
    height: 2.5rem;
  }

  /* Default sizing — vertical */
  .logo-vertical .logo-icon svg {
    height: 4rem;
  }

  .logo-vertical .logo-wordmark svg {
    height: 1.75rem;
  }

  /* Size: small */
  .logo-sm.logo-horizontal .logo-icon svg {
    height: 1.5rem;
  }

  .logo-sm.logo-horizontal .logo-wordmark svg {
    height: 1.5rem;
  }

  .logo-sm.logo-vertical .logo-icon svg {
    height: 2.5rem;
  }

  .logo-sm.logo-vertical .logo-wordmark svg {
    height: 1.125rem;
  }

  /* Size: large */
  .logo-lg.logo-horizontal .logo-icon svg {
    height: 3.5rem;
  }

  .logo-lg.logo-horizontal .logo-wordmark svg {
    height: 3.5rem;
  }

  .logo-lg.logo-vertical .logo-icon svg {
    height: 5.5rem;
  }

  .logo-lg.logo-vertical .logo-wordmark svg {
    height: 2.25rem;
  }

  /* ----------------------------------------------------------
     Logo Animation — .logo-animated
     Center fades in, leaves unfurl from center with 3D fold.
     Reverse: leaves fold back to center, then center fades out.
     Add .logo-animate to trigger (or use .logo-animate-hover
     on a parent to trigger on hover).
     ---------------------------------------------------------- */

  .logo-animated .logo-icon svg {
    perspective: 200px;
    overflow: visible;
  }

  .logo-animated .logo-icon rect {
    will-change: transform, opacity;
  }

  /* Center square — fades out last on reverse */
  .logo-animated .logo-icon rect:nth-child(1) {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    transition-delay: 0.6s;
  }

  /* Left leaf */
  .logo-animated .logo-icon rect:nth-child(5) {
    transform-origin: right center;
    transform: rotateY(90deg);
    opacity: 0;
    transition:
      transform 0.4s ease-in,
      opacity 0.25s ease-in;
    transition-delay: 0s;
  }

  /* Right leaf */
  .logo-animated .logo-icon rect:nth-child(4) {
    transform-origin: left center;
    transform: rotateY(-90deg);
    opacity: 0;
    transition:
      transform 0.4s ease-in,
      opacity 0.25s ease-in;
    transition-delay: 0.1s;
  }

  /* Bottom leaf */
  .logo-animated .logo-icon rect:nth-child(3) {
    transform-origin: center top;
    transform: rotateX(90deg);
    opacity: 0;
    transition:
      transform 0.4s ease-in,
      opacity 0.25s ease-in;
    transition-delay: 0.2s;
  }

  /* Top leaf */
  .logo-animated .logo-icon rect:nth-child(2) {
    transform-origin: center bottom;
    transform: rotateX(-90deg);
    opacity: 0;
    transition:
      transform 0.4s ease-in,
      opacity 0.25s ease-in;
    transition-delay: 0.3s;
  }

  /* Forward animation */
  .logo-animated.logo-animate .logo-icon rect:nth-child(1) {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    transition-delay: 0s;
  }

  .logo-animated.logo-animate .logo-icon rect:nth-child(2) {
    transform: rotateX(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.3s;
  }

  .logo-animated.logo-animate .logo-icon rect:nth-child(3) {
    transform: rotateX(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.45s;
  }

  .logo-animated.logo-animate .logo-icon rect:nth-child(4) {
    transform: rotateY(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.6s;
  }

  .logo-animated.logo-animate .logo-icon rect:nth-child(5) {
    transform: rotateY(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.75s;
  }

  /* Hover trigger variant */
  .logo-animate-hover:hover .logo-animated .logo-icon rect:nth-child(1) {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    transition-delay: 0s;
  }

  .logo-animate-hover:hover .logo-animated .logo-icon rect:nth-child(2) {
    transform: rotateX(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.3s;
  }

  .logo-animate-hover:hover .logo-animated .logo-icon rect:nth-child(3) {
    transform: rotateX(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.45s;
  }

  .logo-animate-hover:hover .logo-animated .logo-icon rect:nth-child(4) {
    transform: rotateY(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.6s;
  }

  .logo-animate-hover:hover .logo-animated .logo-icon rect:nth-child(5) {
    transform: rotateY(0);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.3s ease-out;
    transition-delay: 0.75s;
  }

  /* ----------------------------------------------------------
     Separators — subtle dividers
     ---------------------------------------------------------- */

  .separator,
  .separator-light {
    border: none;
    border-top: 1px dashed var(--theme-fg);
    opacity: 0.2;
  }

  /* ----------------------------------------------------------
     Line Icons (SVG)
     .icon      — on dark/hero backgrounds
     .icon-dark — on light/page backgrounds
     ---------------------------------------------------------- */

  .icon,
  .icon-dark {
    width: 3rem;
    height: 3rem;
    stroke: var(--theme-fg);
    stroke-width: 1.5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ----------------------------------------------------------
     Gradients — subtle pale-to-pale surface shifts.
     No dark backgrounds. Only text provides contrast.
     ---------------------------------------------------------- */

  .gradient-primary {
    background: linear-gradient(
      160deg,
      var(--theme-bg) 0%,
      var(--theme-bg-subtle) 50%,
      var(--theme-accent) 100%
    );
    color: var(--theme-fg);
  }

  .gradient-accent {
    background: linear-gradient(
      135deg,
      var(--theme-bg-subtle) 0%,
      var(--theme-accent) 100%
    );
    color: var(--theme-fg);
  }

  /* ----------------------------------------------------------
     Prose (long-form content)
     ---------------------------------------------------------- */

  .prose {
    max-width: 65ch;
    color: var(--theme-fg);
    font-size: 1rem;
    line-height: 1.75;
  }

  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    color: var(--theme-fg);
  }

  .prose h1 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-bold, 700);
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.889em;
    line-height: 1.11;
  }

  .prose h2 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-bold, 700);
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.33;
  }

  .prose h3 {
    font-family: var(--typography-font-family-heading);
    font-weight: var(--typography-font-weight-semibold, 600);
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }

  .prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose a {
    color: var(--theme-primary);
    font-weight: var(--typography-font-weight-medium, 500);
    text-decoration: underline;
  }

  .prose strong {
    color: var(--theme-fg);
    font-weight: var(--typography-font-weight-semibold, 600);
  }

  .prose ul,
  .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
  }

  .prose ul {
    list-style-type: disc;
  }

  .prose ol {
    list-style-type: decimal;
  }

  .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose blockquote {
    border-inline-start: 3px solid
      color-mix(in oklab, var(--theme-secondary) 40%, var(--theme-bg));
    padding-inline-start: 1em;
    font-style: italic;
    color: var(--theme-fg-muted);
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  .prose code {
    font-family: var(--typography-font-family-mono);
    font-size: 0.875em;
    font-weight: var(--typography-font-weight-medium, 500);
    background: var(--theme-bg-subtle);
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
  }

  .prose pre {
    font-family: var(--typography-font-family-mono);
    font-size: 0.875em;
    line-height: 1.714;
    background: var(--color-black-1, #0d1e2f);
    color: var(--color-gray-5, #f6f5f0);
    padding: 1em 1.25em;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin-top: 1.714em;
    margin-bottom: 1.714em;
    box-shadow: var(--neu-inset);
  }

  .prose pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
  }

  .prose hr {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .prose img {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.75rem;
    box-shadow: var(--neu-raised-sm);
  }

  /* ----------------------------------------------------------
     Navigation
     .nav-header   — horizontal header bar
     .nav-sidebar  — vertical sidebar
     ---------------------------------------------------------- */

  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }

  .nav-header a {
    color: inherit;
    font-weight: var(--typography-font-weight-medium, 500);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.25s ease;
  }

  .nav-header a:hover {
    text-decoration: none;
    background: var(--theme-surface);
    box-shadow: var(--neu-raised-sm);
  }

  .nav-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .nav-sidebar a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--typography-font-size-sm, 0.875rem);
    color: var(--theme-fg);
    transition: all 0.2s ease;
  }

  .nav-sidebar a:hover {
    background: var(--theme-surface);
    box-shadow: var(--neu-raised-sm);
    text-decoration: none;
    transform: translateX(2px);
  }

  .nav-sidebar a[aria-current="page"],
  .nav-sidebar a.active {
    background: var(--theme-bg-subtle);
    color: var(--theme-fg);
    box-shadow: var(--neu-inset-sm);
  }

  /* ----------------------------------------------------------
     Section Layouts
     .section           — standard vertical section
     .section-primary   — hero/gradient bg (exception to mono-tone rule)
     .section-muted     — subtle bg shift
     ---------------------------------------------------------- */

  .section {
    padding-block: 6rem;
  }

  .section-primary {
    padding-block: 6rem;
    background: linear-gradient(
      160deg,
      color-mix(
          in oklab,
          var(--color-secondary-light, #f0f5f5) 35%,
          var(--theme-bg-subtle)
        )
        0%,
      color-mix(
          in oklab,
          var(--color-secondary-light, #f0f5f5) 55%,
          var(--theme-bg-subtle)
        )
        40%,
      var(--theme-bg-subtle) 65%,
      color-mix(
          in oklab,
          var(--color-primary-light, #eef1f6) 30%,
          var(--theme-accent)
        )
        100%
    );
    color: var(--theme-fg);
  }

  .section-muted {
    padding-block: 6rem;
    background: var(--theme-bg-subtle);
  }

  /* ----------------------------------------------------------
     Container
     Centered max-width wrapper.
     ---------------------------------------------------------- */

  .container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.35rem;
  }

  @media (min-width: 640px) {
    .container {
      padding-inline: 2.25rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: 3.6rem;
    }
  }

  /* ----------------------------------------------------------
     Data Table
     Sortable, striped table for data-heavy views.
     ---------------------------------------------------------- */

  .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--theme-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--neu-raised-sm);
    overflow: hidden;
    font-size: var(--typography-font-size-sm);
  }

  .data-table thead {
    background: var(--theme-bg-subtle);
  }

  .data-table th {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-weight: var(--typography-font-weight-semibold);
    color: var(--color-gray-2);
    font-size: var(--typography-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--typography-letter-spacing-wide);
    border-bottom: 1px solid var(--theme-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
  }

  .data-table th:hover {
    color: var(--theme-fg);
  }

  .data-table th .sort-indicator {
    margin-left: 0.25rem;
    opacity: 0.4;
  }

  .data-table th .sort-indicator.active {
    opacity: 1;
    color: var(--theme-primary);
  }

  .data-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid
      color-mix(in srgb, var(--theme-border) 50%, transparent);
    color: var(--theme-fg);
    vertical-align: middle;
  }

  .data-table tbody tr {
    transition: background 0.1s ease;
    cursor: pointer;
  }

  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--theme-primary) 4%, transparent);
  }

  .data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-gray-5) 50%, var(--theme-bg));
  }

  .data-table tbody tr:nth-child(even):hover {
    background: color-mix(in srgb, var(--theme-primary) 4%, transparent);
  }

  .data-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* ----------------------------------------------------------
     Search Input
     Pill-shaped input with leading search icon.
     Wrap an <svg class="search-icon"> + <input class="form-input">
     in a .search-input container.
     ---------------------------------------------------------- */

  .search-input {
    position: relative;
  }

  .search-input input,
  .search-input .form-input {
    padding-left: 2.25rem;
    border-radius: var(--border-radius-full);
    width: 100%;
  }

  .search-input .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-3);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
  }

  /* ----------------------------------------------------------
     Drop Zone
     Dashed file-upload target with drag-over highlight.
     ---------------------------------------------------------- */

  .drop-zone {
    border: 2px dashed var(--theme-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8) var(--spacing-4);
    text-align: center;
    color: var(--color-gray-3);
    background: color-mix(in srgb, var(--color-gray-5) 50%, transparent);
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .drop-zone:hover,
  .drop-zone.dragover {
    border-color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 5%, transparent);
    color: var(--theme-primary);
  }

  .drop-zone .drop-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
    display: block;
  }

  .drop-zone .drop-text {
    font-size: var(--typography-font-size-sm);
    font-weight: var(--typography-font-weight-medium);
  }

  .drop-zone .drop-hint {
    font-size: var(--typography-font-size-xs);
    color: var(--color-gray-3);
    margin-top: var(--spacing-1);
  }

  /* ----------------------------------------------------------
     Document List
     Compact file list with icon, name, and action link.
     ---------------------------------------------------------- */

  .doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .doc-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid
      color-mix(in srgb, var(--theme-border) 50%, transparent);
    font-size: var(--typography-font-size-sm);
  }

  .doc-list li:last-child {
    border-bottom: none;
  }

  .doc-list .doc-icon {
    color: var(--theme-primary);
    flex-shrink: 0;
  }

  .doc-list .doc-name {
    flex: 1;
    color: var(--theme-fg);
  }

  .doc-list .doc-action {
    color: var(--theme-primary);
    cursor: pointer;
    font-weight: var(--typography-font-weight-medium);
    text-decoration: none;
    transition: opacity 0.15s;
  }

  .doc-list .doc-action:hover {
    opacity: 0.7;
  }

  /* ----------------------------------------------------------
     Nav Count Badge
     Small counter badge for sidebar navigation items.
     ---------------------------------------------------------- */

  .sidebar-count {
    margin-left: auto;
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
    color: var(--theme-fg-muted);
    font-size: 0.6875rem;
    font-weight: var(--typography-font-weight-semibold);
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-full);
    min-width: 1.5rem;
    text-align: center;
  }

  .nav-sidebar a.active .sidebar-count {
    background: color-mix(in srgb, var(--theme-primary) 20%, transparent);
    color: var(--theme-primary);
  }

  /* ----------------------------------------------------------
     Notification Bell
     Icon button with optional unread count badge.
     ---------------------------------------------------------- */

  .header-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-fg-muted);
    padding: var(--spacing-2);
    border-radius: var(--border-radius-md);
    transition:
      color 0.15s,
      background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-bell:hover {
    color: var(--theme-fg);
    background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
  }

  .unread-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    background: var(--color-semantic-error);
    color: var(--color-white-1);
    font-size: 0.5625rem;
    font-weight: var(--typography-font-weight-bold);
    min-width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    line-height: 1;
  }

  .unread-badge:empty {
    display: none;
  }
}

/* ================================================================
   LAYER: UTILITIES
   Layout helpers, grids, text utilities, animations.
   ================================================================ */

@layer utilities {
  /* --- Layout --- */

  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }

  .grid {
    display: grid;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (min-width: 640px) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* --- Gaps --- */

  .gap-1 {
    gap: 0.25rem;
  }
  .gap-2 {
    gap: 0.5rem;
  }
  .gap-3 {
    gap: 0.75rem;
  }
  .gap-4 {
    gap: 1rem;
  }
  .gap-6 {
    gap: 1.5rem;
  }
  .gap-8 {
    gap: 2rem;
  }
  .gap-12 {
    gap: 3rem;
  }
  .gap-16 {
    gap: 4rem;
  }

  /* --- Spacing --- */

  .mx-auto {
    margin-inline: auto;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  .mb-4 {
    margin-bottom: 1rem;
  }
  .mb-6 {
    margin-bottom: 1.5rem;
  }
  .mb-8 {
    margin-bottom: 2rem;
  }
  .mb-12 {
    margin-bottom: 3rem;
  }
  .mb-16 {
    margin-bottom: 4rem;
  }
  .mt-0 {
    margin-top: 0;
  }

  .p-4 {
    padding: 1rem;
  }
  .p-6 {
    padding: 1.5rem;
  }
  .p-8 {
    padding: 2rem;
  }
  .px-4 {
    padding-inline: 1rem;
  }
  .px-6 {
    padding-inline: 1.5rem;
  }
  .py-4 {
    padding-block: 1rem;
  }
  .py-6 {
    padding-block: 1.5rem;
  }

  /* --- Text --- */

  .text-xs {
    font-size: var(--typography-font-size-xs, 0.75rem);
  }
  .text-sm {
    font-size: var(--typography-font-size-sm, 0.875rem);
  }
  .text-base {
    font-size: var(--typography-font-size-base, 1rem);
  }
  .text-lg {
    font-size: var(--typography-font-size-lg, 1.125rem);
  }
  .text-xl {
    font-size: var(--typography-font-size-xl, 1.25rem);
  }
  .text-2xl {
    font-size: var(--typography-font-size-2xl, 1.5rem);
  }
  .text-3xl {
    font-size: var(--typography-font-size-3xl, 1.875rem);
  }
  .text-4xl {
    font-size: var(--typography-font-size-4xl, 2.25rem);
  }
  .text-5xl {
    font-size: var(--typography-font-size-5xl, 3rem);
  }

  .font-normal {
    font-weight: var(--typography-font-weight-light, 400);
  }
  .font-medium {
    font-weight: var(--typography-font-weight-medium, 500);
  }
  .font-semibold {
    font-weight: var(--typography-font-weight-semibold, 600);
  }
  .font-bold {
    font-weight: var(--typography-font-weight-bold, 700);
  }

  .font-heading {
    font-family: var(--typography-font-family-heading);
  }
  .font-sans {
    font-family: var(--typography-font-family-sans);
  }
  .font-mono {
    font-family: var(--typography-font-family-mono);
  }

  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .leading-tight {
    line-height: var(--typography-line-height-tight, 1.25);
  }
  .leading-relaxed {
    line-height: var(--typography-line-height-relaxed, 1.625);
  }

  /* --- Colors --- */

  .text-primary {
    color: var(--theme-primary);
  }
  .text-secondary {
    color: var(--theme-secondary);
  }
  .text-muted {
    color: var(--theme-fg-muted);
  }
  .text-primary-foreground {
    color: var(--theme-primary-foreground);
  }
  .text-secondary-foreground {
    color: var(--theme-secondary-foreground);
  }

  .bg-base {
    background-color: var(--theme-bg);
  }
  .bg-muted {
    background-color: var(--theme-bg-subtle);
  }
  .bg-accent {
    background-color: var(--theme-accent);
  }
  .bg-primary {
    background-color: var(--theme-primary);
  }
  .bg-secondary {
    background-color: var(--theme-secondary);
  }
  .bg-surface {
    background-color: var(--theme-surface);
  }

  /* --- Neumorphic utility classes --- */

  .neu-raised {
    box-shadow: var(--neu-raised);
  }
  .neu-raised-sm {
    box-shadow: var(--neu-raised-sm);
  }
  .neu-raised-lg {
    box-shadow: var(--neu-raised-lg);
  }
  .neu-inset {
    box-shadow: var(--neu-inset);
  }
  .neu-inset-sm {
    box-shadow: var(--neu-inset-sm);
  }
  .neu-flat {
    box-shadow: none;
  }

  /* --- Radius --- */

  .rounded {
    border-radius: 0.5rem;
  }
  .rounded-lg {
    border-radius: 0.75rem;
  }
  .rounded-xl {
    border-radius: 1rem;
  }
  .rounded-2xl {
    border-radius: 1.5rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }
  .rounded-3xl {
    border-radius: 1.5rem;
  }

  /* --- Visibility --- */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .hidden {
    display: none;
  }

  @media (min-width: 1024px) {
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
  }

  /* --- Animations --- */

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  @keyframes draw-line {
    from {
      stroke-dashoffset: 1000px;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  .animate-fade-in-up {
    animation: 0.8s ease-out forwards fade-in-up;
  }

  .animate-float {
    animation: 6s ease-in-out infinite float;
  }

  .animate-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000px;
    animation: 2s ease-out forwards draw-line;
  }

  /* --- Max-width --- */

  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-sm {
    max-width: 24rem;
  }
  .max-w-md {
    max-width: 28rem;
  }
  .max-w-lg {
    max-width: 32rem;
  }
  .max-w-2xl {
    max-width: 42rem;
  }
  .max-w-3xl {
    max-width: 48rem;
  }
  .max-w-4xl {
    max-width: 56rem;
  }
  .max-w-6xl {
    max-width: 72rem;
  }

  /* --- Width/height --- */

  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }

  /* --- Overflow --- */

  .overflow-hidden {
    overflow: hidden;
  }

  /* --- Position --- */

  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .sticky {
    position: sticky;
  }
  .fixed {
    position: fixed;
  }
  .inset-0 {
    inset: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }

  /* ----------------------------------------------------------
     Avatar — user identity display
     Circular badge with initials or image. Uses --theme-primary
     background by default. Size modifiers: .avatar-sm, .avatar-lg.
     ---------------------------------------------------------- */

  .avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-full);
    background: var(--theme-primary);
    color: var(--color-white-1, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--typography-font-size-sm);
    font-weight: var(--typography-font-weight-semibold);
    flex-shrink: 0;
    overflow: hidden;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--typography-font-size-xs);
  }

  .avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--typography-font-size-lg);
  }

  /* ----------------------------------------------------------
     Detail Row — key-value pair display
     Horizontal layout with label on left, value on right.
     Stack inside a container — borders between rows auto-hide
     on the last item.
     ---------------------------------------------------------- */

  .detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid
      color-mix(in srgb, var(--theme-border) 40%, transparent);
    font-size: var(--typography-font-size-sm);
  }

  .detail-row:last-child {
    border-bottom: none;
  }

  .detail-label {
    color: var(--theme-fg-muted, var(--color-gray-2));
    font-weight: var(--typography-font-weight-medium);
  }

  .detail-value {
    color: var(--theme-fg);
    text-align: right;
  }

  /* ----------------------------------------------------------
     Timeline — vertical activity timeline
     Vertical line with dot markers. Used for activity logs,
     audit trails, history views.
     ---------------------------------------------------------- */

  .timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--theme-border);
  }

  .timeline-item {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: var(--spacing-4);
  }

  .timeline-item:last-child {
    padding-bottom: 0;
  }

  .timeline-item::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.375rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--border-radius-full);
    background: var(--theme-primary);
    border: 2px solid var(--theme-bg);
    z-index: 1;
  }

  .timeline-date {
    font-size: var(--typography-font-size-xs);
    color: var(--color-gray-3);
    margin-bottom: 0.125rem;
  }

  .timeline-text {
    font-size: var(--typography-font-size-sm);
    color: var(--theme-fg);
  }

  /* ----------------------------------------------------------
     Stepper — multi-step progress indicator
     Horizontal flow of numbered steps connected by lines.
     States: default (gray), .active (primary), .completed (green).
     ---------------------------------------------------------- */

  .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-4) 0;
  }

  .stepper-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--typography-font-size-sm);
    color: var(--color-gray-3);
    font-weight: var(--typography-font-weight-medium);
    white-space: nowrap;
  }

  .step-number {
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--color-gray-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--typography-font-size-sm);
    font-weight: var(--typography-font-weight-bold);
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  .stepper-step.active {
    color: var(--theme-primary);
  }

  .stepper-step.active .step-number {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: var(--color-white-1, #fff);
  }

  .stepper-step.completed {
    color: var(--color-secondary-muted);
  }

  .stepper-step.completed .step-number {
    border-color: var(--color-secondary-muted);
    background: var(--color-secondary-muted);
    color: var(--color-white-1, #fff);
  }

  .stepper-line {
    flex: 0 0 3rem;
    height: 2px;
    background: var(--color-gray-4);
    margin: 0 var(--spacing-2);
  }

  .stepper-line.completed {
    background: var(--color-secondary-muted);
  }

  @media (max-width: 767px) {
    .stepper .step-label {
      display: none;
    }

    .stepper-line {
      flex: 0 0 1.5rem;
    }
  }

  /* ----------------------------------------------------------
     Empty State — placeholder for empty lists/views
     Centered content with icon and message text.
     ---------------------------------------------------------- */

  .empty-state {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
    color: var(--color-gray-3);
  }

  .empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
    display: block;
  }

  .empty-state p {
    font-size: var(--typography-font-size-lg);
    margin: 0;
  }

  /* --- Acrylic panel ---
     Frosted-glass effect: semi-transparent bg + backdrop blur.
     Content sits on these panels; the parallax orbs bleed through. */

  .acrylic-panel {
    background: var(--acrylic-bg);
    backdrop-filter: blur(var(--acrylic-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-blur));
  }

  .acrylic-panel--strong {
    background: var(--acrylic-strong-bg);
    backdrop-filter: blur(var(--acrylic-strong-blur));
    -webkit-backdrop-filter: blur(var(--acrylic-strong-blur));
  }

  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    .acrylic-panel,
    .acrylic-panel--strong {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* --- Status color utilities ---
     Semantic status colors for text, backgrounds, borders, and glows.
     Uses --color-semantic-* tokens from the design system. */

  .text-status-success {
    color: var(--color-semantic-success);
  }
  .text-status-error {
    color: var(--color-semantic-error);
  }
  .text-status-warning {
    color: var(--color-semantic-warning);
  }
  .text-status-info {
    color: var(--color-semantic-info);
  }

  .bg-status-success {
    background-color: var(--color-semantic-success);
  }
  .bg-status-error {
    background-color: var(--color-semantic-error);
  }
  .bg-status-warning {
    background-color: var(--color-semantic-warning);
  }
  .bg-status-info {
    background-color: var(--color-semantic-info);
  }

  /* Subtle status backgrounds — 10% and 80% opacity */
  .bg-status-success\/10 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-success) 10%,
      transparent
    );
  }
  .bg-status-success\/80 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-success) 80%,
      transparent
    );
  }
  .bg-status-error\/10 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-error) 10%,
      transparent
    );
  }
  .bg-status-error\/80 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-error) 80%,
      transparent
    );
  }
  .bg-status-warning\/10 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-warning) 10%,
      transparent
    );
  }
  .bg-status-warning\/80 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-warning) 80%,
      transparent
    );
  }
  .bg-status-info\/10 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-info) 10%,
      transparent
    );
  }
  .bg-status-info\/80 {
    background-color: color-mix(
      in oklab,
      var(--color-semantic-info) 80%,
      transparent
    );
  }

  /* Status borders */
  .border-status-success\/30 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-success) 30%,
      transparent
    );
  }
  .border-status-success\/40 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-success) 40%,
      transparent
    );
  }
  .border-status-error\/30 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-error) 30%,
      transparent
    );
  }
  .border-status-error\/40 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-error) 40%,
      transparent
    );
  }
  .border-status-warning\/30 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-warning) 30%,
      transparent
    );
  }
  .border-status-warning\/40 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-warning) 40%,
      transparent
    );
  }
  .border-status-info\/30 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-info) 30%,
      transparent
    );
  }
  .border-status-info\/40 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-info) 40%,
      transparent
    );
  }
  .border-status-info\/50 {
    border-color: color-mix(
      in oklab,
      var(--color-semantic-info) 50%,
      transparent
    );
  }

  /* --- Glow utilities ---
     Soft box-shadow glows using semantic status colours. */

  .glow-success {
    box-shadow: 0 0 10px var(--color-semantic-success);
  }
  .glow-error {
    box-shadow: 0 0 10px var(--color-semantic-error);
  }
  .glow-warning {
    box-shadow: 0 0 10px var(--color-semantic-warning);
  }
  .glow-info {
    box-shadow: 0 0 10px var(--color-semantic-info);
  }
  .glow-sm-success {
    box-shadow: 0 0 4px var(--color-semantic-success);
  }
  .glow-sm-error {
    box-shadow: 0 0 4px var(--color-semantic-error);
  }
  .glow-sm-warning {
    box-shadow: 0 0 4px var(--color-semantic-warning);
  }
  .glow-sm-info {
    box-shadow: 0 0 4px var(--color-semantic-info);
  }
  .glow-xs-info {
    box-shadow: 0 0 8px var(--color-semantic-info);
  }

  /* --- Acrylic edge ---
     Subtle frosted-glass edge highlight. Composable — use alongside
     .acrylic-panel or independently on any glass surface.
     Directional: -top, -right, -bottom, -left */

  .acrylic-edge-top {
    border-top: 1px solid
      color-mix(in oklab, var(--theme-border) 35%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .acrylic-edge-right {
    border-right: 1px solid
      color-mix(in oklab, var(--theme-border) 35%, transparent);
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.04);
  }

  .acrylic-edge-bottom {
    border-bottom: 1px solid
      color-mix(in oklab, var(--theme-border) 35%, transparent);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
  }

  .acrylic-edge-left {
    border-left: 1px solid
      color-mix(in oklab, var(--theme-border) 35%, transparent);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.04);
  }

  /* --- Acrylic edge — scroll-reveal variants ---
     Edge starts transparent and fades in as the user scrolls.
     -top/-bottom respond to vertical (block) scroll.
     -left/-right respond to horizontal (inline) scroll.
     Shared keyframes so shadow-DOM / generated-cell consumers
     can reference them directly without needing the class. */

  @keyframes acrylic-edge-top {
    from {
      border-top-color: transparent;
      box-shadow: none;
    }
    to {
      border-top-color: color-mix(
        in oklab,
        var(--theme-border) 35%,
        transparent
      );
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
  }
  @keyframes acrylic-edge-right {
    from {
      border-right-color: transparent;
      box-shadow: none;
    }
    to {
      border-right-color: color-mix(
        in oklab,
        var(--theme-border) 35%,
        transparent
      );
      box-shadow: -1px 0 3px rgba(0, 0, 0, 0.04);
    }
  }
  @keyframes acrylic-edge-bottom {
    from {
      border-bottom-color: transparent;
      box-shadow: none;
    }
    to {
      border-bottom-color: color-mix(
        in oklab,
        var(--theme-border) 35%,
        transparent
      );
      box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
    }
  }
  @keyframes acrylic-edge-left {
    from {
      border-left-color: transparent;
      box-shadow: none;
    }
    to {
      border-left-color: color-mix(
        in oklab,
        var(--theme-border) 35%,
        transparent
      );
      box-shadow: 1px 0 3px rgba(0, 0, 0, 0.04);
    }
  }

  @supports (animation-timeline: scroll()) {
    .acrylic-edge-top--scroll {
      border-top: 1px solid transparent;
      box-shadow: none;
      animation: acrylic-edge-top linear both;
      animation-timeline: scroll(block nearest);
      animation-range: 0px 20px;
    }
    .acrylic-edge-right--scroll {
      border-right: 1px solid transparent;
      box-shadow: none;
      animation: acrylic-edge-right linear both;
      animation-timeline: scroll(inline nearest);
      animation-range: 0px 20px;
    }
    .acrylic-edge-bottom--scroll {
      border-bottom: 1px solid transparent;
      box-shadow: none;
      animation: acrylic-edge-bottom linear both;
      animation-timeline: scroll(block nearest);
      animation-range: 0px 20px;
    }
    .acrylic-edge-left--scroll {
      border-left: 1px solid transparent;
      box-shadow: none;
      animation: acrylic-edge-left linear both;
      animation-timeline: scroll(inline nearest);
      animation-range: 0px 20px;
    }
  }
}

/* ---------------------------------------------------------------------------
 * Footer — center content on mobile
 * The shared site footer (#footer) collapses to a single column below 768px;
 * center-align its contents so it matches the rest of the mobile layout.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #footer .grid {
    text-align: center;
  }
  #footer ul {
    align-items: center;
  }
  #footer ayk-logo {
    margin-inline: auto;
  }
  #footer .grid > div > div:not(.mb-6) {
    align-items: center;
  }
}