/*
  Agentic Wizards — design tokens
  Source: Figma file Ln2fIxDC7nIwOSLz4q6Bgw, collections "AW Colour" (Dark / Light), "Spacing", "Radius",
  read 2026-10-01. Variable names follow the Figma WEB code syntax (var(--aw-*)), so a value inspected
  in Figma maps 1:1 to this file. Do not add raw hex anywhere else in the site — add a token here.

  Dark is the brand default. Light is applied with <html data-theme="light">.
*/

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --aw-bg-primary: #071522;
  --aw-bg-secondary: #0b1c2d;
  --aw-bg-card: #11283b;
  --aw-bg-card-hover: #163250;
  --aw-bg-soft: rgba(85, 169, 255, 0.1);

  /* Text */
  --aw-text-primary: #f3ede1;
  --aw-text-secondary: #9db3c8;
  --aw-text-muted: #8aa1b7;

  /* Accents */
  --aw-accent-gold: #c99a2e;
  --aw-accent-gold-light: #d9b45a;
  --aw-accent-energy: #3d9be0;
  --aw-accent-energy-light: #9bd3ff;
  --aw-text-energy: #9bd3ff;        /* energy-coloured text: AA on cards in both themes */

  /* Borders */
  --aw-border-gold: #6e5626;
  --aw-border-subtle: #1c3348;
  --aw-border-line: rgba(218, 171, 59, 0.26);

  /* States */
  --aw-state-success: #46b074;
  --aw-state-warning: #e0a93f;
  --aw-state-danger: #e2685b;

  /* Fixed in both themes: photography, gold fills */
  --aw-overlay-scrim: #071522;
  --aw-text-on-image: #f3ede1;
  --aw-accent-on-image: #d9b45a;
  --aw-text-on-gold: #071522;

  /* Elevation (prototype --shadow) */
  --aw-shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.34);
  --aw-shadow-gold: 0 8px 28px rgba(211, 159, 34, 0.2);
}

:root[data-theme="light"] {
  color-scheme: light;

  --aw-bg-primary: #f3ede1;
  --aw-bg-secondary: #e6ded0;
  --aw-bg-card: #fcfaf5;
  --aw-bg-card-hover: #ffffff;
  --aw-bg-soft: rgba(31, 105, 178, 0.08);

  --aw-text-primary: #11283b;
  --aw-text-secondary: #3a5570;
  --aw-text-muted: #4f6376;

  --aw-accent-gold: #735a18;
  --aw-accent-gold-light: #70561a;
  --aw-accent-energy: #1d649e;
  --aw-accent-energy-light: #4f9ddd;
  --aw-text-energy: #185a91;        /* ≥4.5:1 on every Light surface incl. the soft-blue active rail */

  --aw-border-gold: #c2a970;
  --aw-border-subtle: #d8d1c5;
  --aw-border-line: rgba(151, 105, 23, 0.25);

  --aw-state-success: #1b6e3e;   /* Figma #1f7a45 is 4.0:1 on bg/secondary — darkened for AA */
  --aw-state-warning: #7d5200;   /* Figma #8a5a00 is 4.4:1 on bg/secondary — darkened for AA */
  --aw-state-danger: #a8352a;

  --aw-shadow-panel: 0 24px 80px rgba(49, 42, 27, 0.12);
  --aw-shadow-gold: 0 8px 28px rgba(115, 90, 24, 0.18);
}

:root {
  /* Spacing (Figma collection "Spacing") */
  --aw-space-0: 0px;
  --aw-space-1: 4px;
  --aw-space-2: 8px;
  --aw-space-3: 12px;
  --aw-space-4: 16px;
  --aw-space-5: 20px;
  --aw-space-6: 24px;
  --aw-space-8: 32px;
  --aw-space-10: 40px;
  --aw-space-12: 48px;
  --aw-space-14: 56px;
  --aw-space-16: 64px;
  --aw-space-20: 80px;
  --aw-space-24: 96px;

  /* Radius (Figma collection "Radius") */
  --aw-radius-xs: 2px;
  --aw-radius-sm: 4px;
  --aw-radius-md: 8px;
  --aw-radius-lg: 12px;
  --aw-radius-full: 999px;

  /* Overlay paint styles (fixed artwork, same in both themes) */
  --aw-overlay-fade-x: linear-gradient(90deg, #071522 0%, rgba(7, 21, 34, 0) 30%, rgba(7, 21, 34, 0) 70%, #071522 100%);
  --aw-overlay-fade-y: linear-gradient(180deg, rgba(7, 21, 34, 0.9) 0%, rgba(7, 21, 34, 0) 22%, rgba(7, 21, 34, 0) 78%, rgba(7, 21, 34, 0.95) 100%);
  --aw-overlay-card-bottom: linear-gradient(180deg, rgba(7, 21, 34, 0) 0%, rgba(7, 21, 34, 0.1) 42%, rgba(7, 21, 34, 0.86) 66%, rgba(7, 21, 34, 0.98) 100%);
  --aw-overlay-band: linear-gradient(90deg, rgba(7, 21, 34, 0.95) 0%, rgba(7, 21, 34, 0.78) 30%, rgba(7, 21, 34, 0.5) 60%, rgba(7, 21, 34, 0.66) 100%);

  /* Type families */
  --aw-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --aw-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --aw-font-literary: "Crimson Pro", Georgia, "Times New Roman", serif;

  /* Layout */
  --aw-page-max: 1536px;
  --aw-gutter: var(--aw-space-14);
  --aw-header-h: 72px;
}

@media (max-width: 1023px) {
  :root { --aw-gutter: var(--aw-space-8); }
}
@media (max-width: 639px) {
  :root { --aw-gutter: var(--aw-space-5); --aw-header-h: 64px; }
}