/*
 * ArkPixels Material 3 Expressive foundation.
 * Canonical values live in design-tokens.generated.css; this file defines
 * shared web behavior and page-level aliases only.
 */

:root,
:root[data-theme="light"] {
  --ark-font-heading: Arial, Helvetica, sans-serif;
  --ark-font-body: Arial, Helvetica, sans-serif;
  --ark-line-height-heading-scale: 1;
  --ark-line-height-body-scale: 1;
  --ak-forest-secondary: var(--ark-seed-secondary, #4c6358);
  --ak-forest-tertiary: var(--ark-seed-tertiary, #3e6374);

  --ak-shape-8: var(--ark-shape-extra-small, 8px);
  --ak-shape-12: var(--ark-shape-small, 12px);
  --ak-shape-16: var(--ark-shape-medium, 16px);
  --ak-shape-20: var(--ark-shape-large, 20px);
  --ak-shape-28: var(--ark-shape-extra-large, 28px);
  --radius: var(--ark-shape-medium, 16px);
  --radius-full: var(--ark-shape-full, 9999px);

  --ak-motion-fast: var(--ark-motion-duration-short, 160ms);
  --ak-motion-medium: var(--ark-motion-duration-standard, 240ms);
  --ak-motion-slow: var(--ark-motion-duration-emphasized, 400ms);

  --topbar-height: 72px;
  --page-width: 1240px;
  --landing-primary-strong: var(--ark-color-primary, #1d6b50);
  --landing-surface: var(--ark-color-surface-container-lowest, #ffffff);
  --landing-surface-soft: var(--ark-color-surface-container, #eaefea);
}

:root[data-theme="dark"] {
  /* Keep filled landing CTAs dark enough for white labels. */
  --landing-primary-strong: var(--ark-seed-primary, #1d6b50);
  --landing-surface: var(--ark-color-surface-container-lowest, #0a0f0d);
  --landing-surface-soft: var(--ark-color-surface-container, #1b211e);
}

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

html {
  background: var(--md-background);
  color: var(--md-on-surface);
  font-family: var(--ark-font-body);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ark-font-body);
  line-height: calc(1.2 * var(--ark-line-height-body-scale));
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-brand > span,
.site-footer-brand strong,
.brand-name {
  font-family: var(--ark-font-heading);
  line-height: calc(1.2 * var(--ark-line-height-heading-scale));
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--ark-focus-width, 3px) solid var(--ak-focus-ring);
  outline-offset: var(--ark-focus-offset, 2px);
}

::selection {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}