:root {
  --av-v1-font-body: "Noto Sans", sans-serif;
  --av-v1-font-header: "Urbanist", sans-serif;
  --av-v1-font-label: "Urbanist", sans-serif;
  --av-v1-font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Core brand + neutral palette */
  --av-v1-color-bg: #f4f8f8;
  --av-v1-color-surface: #fcfdfd;
  --av-v1-color-surface-strong: #e7efef;
  --av-v1-color-text: #1d2a33;
  --av-v1-color-text-soft: #586872;
  --av-v1-color-heading: var(--av-v1-color-text);
  --av-v1-color-primary: #00a7a8;
  --av-v1-color-primary-strong: #005665;
  --av-v1-color-outline: #a4b0b8;
  --av-v1-color-focus: #0b57d0;

  /* Semantic aliases for feature/article work */
  --av-v1-color-link: #00a7a8;
  --av-v1-color-link-hover: #005665;
  --av-v1-color-info: #3498db;
  --av-v1-color-success: #27ae60;
  --av-v1-color-warning: #f39c12;
  --av-v1-color-danger: #e6007e;
  --av-v1-color-on-dark: #ffffff;
  --av-v1-color-scrim: rgb(16 24 30 / 0.45);

  /* Intent tokens — override these to retheme all components globally */
  --av-v1-intent-normal:            var(--av-v1-color-primary);
  --av-v1-intent-normal-strong:     var(--av-v1-color-primary-strong);
  --av-v1-intent-normal-container:  color-mix(in srgb, var(--av-v1-color-primary) 15%, white);
  --av-v1-intent-neutral:           var(--av-v1-color-outline);
  --av-v1-intent-neutral-fg:        var(--av-v1-color-text-soft);
  --av-v1-intent-neutral-container: var(--av-v1-color-surface-strong);
  --av-v1-intent-danger:            var(--av-v1-color-danger);
  --av-v1-intent-danger-container:  color-mix(in srgb, var(--av-v1-color-danger) 18%, white);

  --av-v1-space-2xs: 0.25rem;
  --av-v1-space-xs: 0.5rem;
  --av-v1-space-sm: 0.75rem;
  --av-v1-space-md: 1rem;
  --av-v1-space-lg: 1.5rem;
  --av-v1-space-xl: 2rem;

  --av-v1-radius-sm: 0.5rem;
  --av-v1-radius-md: 0.875rem;
  --av-v1-radius-lg: 1.25rem;

  /* Elevation scale */
  --av-v1-elevation-0: none;
  --av-v1-elevation-1: 0 1px 2px rgb(26 33 27 / 0.08);
  --av-v1-elevation-2: 0 2px 6px rgb(21 36 43 / 0.10);
  --av-v1-elevation-3: 0 8px 26px rgb(30 57 41 / 0.12);
  --av-v1-elevation-4: 0 14px 34px rgb(16 30 38 / 0.16);
  --av-v1-shadow-sm: var(--av-v1-elevation-1);
  --av-v1-shadow-md: var(--av-v1-elevation-3);

  --av-v1-motion-fast: 140ms;
  --av-v1-motion-base: 220ms;
  --av-v1-motion-slow: 320ms;
  --av-v1-motion-ripple: 560ms;
  --av-v1-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --av-v1-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);

  /* Shared state layers */
  --av-v1-state-hover-opacity: 0.09;
  --av-v1-state-focus-opacity: 0.12;
  --av-v1-state-pressed-opacity: 0.16;
  --av-v1-state-selected-opacity: 0.12;
  --av-v1-state-color: var(--av-v1-color-primary);

  /* Shared focus ring */
  --av-v1-focus-ring-color: var(--av-v1-color-focus);
  --av-v1-focus-ring-width: 2px;
  --av-v1-focus-ring-offset: 2px;

  /* Engine-tunable layout tokens for browser-specific rendering differences. */
  --av-v1-select-caret-inline-offset: 0.55rem;
  --av-v1-select-caret-block-offset: 0px;
  --av-v1-toggle-track-padding: 0.125rem;
  --av-v1-toggle-thumb-block-offset: 0px;

  /* Breakpoints (mobile-first) */
  --av-v1-bp-tablet: 600px;
  --av-v1-bp-desktop: 900px;
  --av-v1-bp-large: 1280px;

  --md-sys-color-primary: var(--av-v1-color-primary);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #bdecec;
  --md-sys-color-on-primary-container: #073334;
  --md-sys-color-surface: var(--av-v1-color-surface);
  --md-sys-color-on-surface: var(--av-v1-color-text);
  --md-sys-color-outline: var(--av-v1-color-outline);
  --md-sys-color-secondary: #f5a623;
  --md-sys-color-on-secondary: #312000;
  --md-sys-color-error: #e6007e;
  --md-sys-typescale-body-medium-font: var(--av-v1-font-body);
  --md-sys-typescale-title-medium-font: var(--av-v1-font-header);
}

:root[data-av-engine="blink"] {
  --av-v1-select-caret-inline-offset: 0.55rem;
  --av-v1-select-caret-block-offset: 0px;
  --av-v1-toggle-track-padding: 0.125rem;
  --av-v1-toggle-thumb-block-offset: 0px;
}

:root[data-av-engine="webkit"] {
  --av-v1-select-caret-inline-offset: 0.55rem;
  --av-v1-select-caret-block-offset: 0px;
  --av-v1-toggle-track-padding: 0.125rem;
  --av-v1-toggle-thumb-block-offset: 0px;
}

:root[data-av-theme="dark"],
.av-theme-dark {
  --av-v1-color-bg: #111a20;
  --av-v1-color-surface: #17242c;
  --av-v1-color-surface-strong: #1f3038;
  --av-v1-color-text: #e4edf2;
  --av-v1-color-text-soft: #afbfca;
  --av-v1-color-heading: color-mix(in srgb, var(--av-v1-color-primary) 70%, var(--av-v1-color-text));
  --av-v1-color-primary: #22b8ba;
  --av-v1-color-primary-strong: #8ef4f4;
  --av-v1-color-outline: #47616f;
  --av-v1-color-focus: var(--av-v1-color-primary-strong);
  --av-v1-color-link: var(--av-v1-color-primary-strong);
  --av-v1-color-link-hover: #b4f7f7;
  --av-v1-intent-normal-container: color-mix(in srgb, var(--av-v1-color-primary-strong) 16%, black);
  --av-v1-intent-neutral-fg: #bfd0da;
  --av-v1-intent-neutral-container: #20313a;
  --av-v1-intent-danger-container: color-mix(in srgb, var(--av-v1-color-danger) 22%, black);
  --av-v1-color-scrim: rgb(4 8 10 / 0.62);
  --av-v1-state-color: var(--av-v1-color-primary-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-av-theme]) {
    --av-v1-color-bg: #111a20;
    --av-v1-color-surface: #17242c;
    --av-v1-color-surface-strong: #1f3038;
    --av-v1-color-text: #e4edf2;
    --av-v1-color-text-soft: #afbfca;
    --av-v1-color-heading: color-mix(in srgb, var(--av-v1-color-primary) 70%, var(--av-v1-color-text));
    --av-v1-color-primary: #22b8ba;
    --av-v1-color-primary-strong: #8ef4f4;
    --av-v1-color-outline: #47616f;
    --av-v1-color-focus: var(--av-v1-color-primary-strong);
    --av-v1-color-link: var(--av-v1-color-primary-strong);
    --av-v1-color-link-hover: #b4f7f7;
    --av-v1-intent-normal-container: color-mix(in srgb, var(--av-v1-color-primary-strong) 16%, black);
    --av-v1-intent-neutral-fg: #bfd0da;
    --av-v1-intent-neutral-container: #20313a;
    --av-v1-intent-danger-container: color-mix(in srgb, var(--av-v1-color-danger) 22%, black);
    --av-v1-color-scrim: rgb(4 8 10 / 0.62);
    --av-v1-state-color: var(--av-v1-color-primary-strong);
  }
}

.av-components-page {
  color: var(--av-v1-color-text);
  font-family: var(--av-v1-font-body);
}