/* AgentForge's tokens (AF-304): the design's round 2 set (docs/design_handoff_agentforge_r2/tokens),
   the one source of every colour, space and radius a page uses. Light is the default; dark
   follows the system, or is forced with [data-theme] (AF-308).
   Added here: --af-on-heat, the text on a Heat ground, always dark: Heat never sits under
   light text (DEVELOPER-REVIEW-2, contrast). */
:root,
[data-theme="light"] {
  --af-bg: #f7f3ec;
  --af-surface: #ffffff;
  --af-raised: #f7f3ec;
  --af-text: #17140f;
  --af-text2: #4a443b;
  --af-label: #6b6358;
  --af-border: #d9d0c1;
  --af-border-strong: #8f8574;
  --af-heat: #ff5a1f;
  --af-heat-hover: #ff7a47;
  --af-heat-tint: #fff1e8;
  --af-heat-pressed: #ffd2bd;
  --af-on-heat: #17140f;
  --af-red: #b3261e;
  --af-red-bg: #f6dcda;
  --af-green: #256330;
  --af-green-bg: #e3efe4;
  --af-solid: #17140f;
  --af-inverse: #17140f;
  --af-inverse-text: #efe9dd;
  --af-disabled-bg: #e6dfd2;
  --af-disabled-text: #6b6358;
  --af-spec: #2b59c3;
  --af-focus: #17140f;
  --af-focus-ring: rgba(255, 90, 31, 0.25);
  --af-font-display: "Familjen Grotesk", system-ui, sans-serif;
  --af-font-mono: "Martian Mono", ui-monospace, monospace;
  --af-radius-cell: 2px;
  --af-radius-control: 4px;
  --af-radius-card: 6px;
  --af-space-1: 4px;
  --af-space-2: 8px;
  --af-space-3: 12px;
  --af-space-4: 16px;
  --af-space-5: 20px;
  --af-space-6: 24px;
  --af-space-8: 32px;
  --af-space-10: 40px;
  --af-space-12: 48px;
  --af-target-min: 24px;
  --af-target-touch: 44px;
  --af-shadow-float: 0 30px 60px rgba(0, 0, 0, 0.45);
  --af-shadow-dialog: 0 30px 60px rgba(0, 0, 0, 0.35);
  --af-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --af-dur-fast: 120ms;
  --af-dur: 200ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --af-bg: #121009;
    --af-surface: #1d1a14;
    --af-raised: #26221b;
    --af-text: #efe9dd;
    --af-text2: #cfc7b8;
    --af-label: #a99f8e;
    --af-border: #3a342b;
    --af-border-strong: #857b6b;
    --af-heat: #ff5a1f;
    --af-heat-hover: #ff7a47;
    --af-heat-tint: #2a1d15;
    --af-heat-pressed: #5a2a14;
    --af-on-heat: #17140f;
    --af-red: #ff8f84;
    --af-red-bg: #3a1d1a;
    --af-green: #8fd19a;
    --af-green-bg: #1f2f22;
    --af-solid: #efe9dd;
    --af-inverse: #efe9dd;
    --af-inverse-text: #17140f;
    --af-disabled-bg: #2b261f;
    --af-disabled-text: #a99f8e;
    --af-spec: #8fb0ff;
    --af-focus: #efe9dd;
    --af-focus-ring: rgba(255, 90, 31, 0.35);
  }
}
[data-theme="dark"] {
  --af-bg: #121009;
  --af-surface: #1d1a14;
  --af-raised: #26221b;
  --af-text: #efe9dd;
  --af-text2: #cfc7b8;
  --af-label: #a99f8e;
  --af-border: #3a342b;
  --af-border-strong: #857b6b;
  --af-heat: #ff5a1f;
  --af-heat-hover: #ff7a47;
  --af-heat-tint: #2a1d15;
  --af-heat-pressed: #5a2a14;
  --af-on-heat: #17140f;
  --af-red: #ff8f84;
  --af-red-bg: #3a1d1a;
  --af-green: #8fd19a;
  --af-green-bg: #1f2f22;
  --af-solid: #efe9dd;
  --af-inverse: #efe9dd;
  --af-inverse-text: #17140f;
  --af-disabled-bg: #2b261f;
  --af-disabled-text: #a99f8e;
  --af-spec: #8fb0ff;
  --af-focus: #efe9dd;
  --af-focus-ring: rgba(255, 90, 31, 0.35);
}
/* Native controls (select, textarea, scrollbars) follow the page's theme (AF-304 review). */
:root {
  color-scheme: light dark;
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}
:focus-visible {
  outline: 2px solid var(--af-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: a person who asked for no motion wins over every page's own rule */
    animation: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: as above */
    transition: none !important;
  }
}