/* aggrologix brand tokens
   Light is the default. Dark applies when:
     - the user's OS is set to dark and the site hasn't forced light, or
     - <html data-theme="dark"> is set by a toggle.
   <html data-theme="light"> forces light even on a dark OS.
   Components should only use the semantic tokens (--ax-bg, --ax-text, --ax-accent ...),
   never the raw palette, so they switch automatically.

   Ultramarine #2B3BFF is the one accent in BOTH themes.
     --ax-accent        fills and marks: buttons, tags, progress, active markers, icons, logo chevrons
     --ax-accent-text   small accent text (eyebrows, labels): ultramarine in light, paper in dark
     --ax-link          link text: ultramarine in light, paper in dark ...
     --ax-link-underline  ... always underlined in ultramarine
     --ax-focus         focus ring: ultramarine in light, paper in dark
   Never set text in --ax-accent: on the dark background it is only 2.8:1. */

:root {
  /* raw palette — reference only */
  --ax-ink: #12131A;
  --ax-paper: #F2EFE8;
  --ax-ultramarine: #2B3BFF;

  /* semantic — light (default) */
  --ax-bg: #F2EFE8;
  --ax-bg-sunken: #E6E1D6;
  --ax-surface: #FFFFFF;
  --ax-text: #12131A;
  --ax-text-muted: #5F5E67;
  --ax-accent: #2B3BFF;
  --ax-accent-bg: #2B3BFF;
  --ax-on-accent: #FFFFFF;
  --ax-accent-text: #2B3BFF;
  --ax-link: #2B3BFF;
  --ax-link-underline: #2B3BFF;
  --ax-focus: #2B3BFF;
  --ax-border: rgba(18,19,26,0.12);
  --ax-grid-color: rgba(18,19,26,0.07);
  --ax-logo-letters: #12131A;
  --ax-logo-accent: #2B3BFF;
  color-scheme: light;

  /* grid, motion, shape */
  --ax-grid-cell: 48px;
  --ax-grid-line: 2px;
  --ax-grid-offset: 23px;
  --ax-ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ax-ease-out: cubic-bezier(0.6, 0, 0.1, 1);
  --ax-ease-in: cubic-bezier(0.8, 0, 0.15, 1);
  --ax-motion-duration: 4.8s;
  --ax-radius-panel: 4px;
  --ax-radius-button: 6px;

  /* reserved for future products — not used by the company brand */
  --ax-product-lime: #6FE81C;
  --ax-product-red: #E10600;
  --ax-product-amber: #FFB020;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ax-bg: #12131A;
    --ax-bg-sunken: #0B0C11;
    --ax-surface: #1C1D26;
    --ax-text: #F2EFE8;
    --ax-text-muted: #A2A1AB;
    --ax-accent: #2B3BFF;
    --ax-accent-bg: #2B3BFF;
    --ax-on-accent: #FFFFFF;
    --ax-accent-text: #F2EFE8;
    --ax-link: #F2EFE8;
    --ax-link-underline: #2B3BFF;
    --ax-focus: #F2EFE8;
    --ax-border: rgba(242,239,232,0.12);
    --ax-grid-color: rgba(242,239,232,0.06);
    --ax-logo-letters: #F2EFE8;
    --ax-logo-accent: #2B3BFF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ax-bg: #12131A;
  --ax-bg-sunken: #0B0C11;
  --ax-surface: #1C1D26;
  --ax-text: #F2EFE8;
  --ax-text-muted: #A2A1AB;
  --ax-accent: #2B3BFF;
  --ax-accent-bg: #2B3BFF;
  --ax-on-accent: #FFFFFF;
  --ax-accent-text: #F2EFE8;
  --ax-link: #F2EFE8;
  --ax-link-underline: #2B3BFF;
  --ax-focus: #F2EFE8;
  --ax-border: rgba(242,239,232,0.12);
  --ax-grid-color: rgba(242,239,232,0.06);
  --ax-logo-letters: #F2EFE8;
  --ax-logo-accent: #2B3BFF;
  color-scheme: dark;
}

/* sensible base: page + inline logo */
body { background: var(--ax-bg); color: var(--ax-text); }
.ax-logo { display: block; height: auto; }
a { color: var(--ax-link); text-decoration-color: var(--ax-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--ax-focus); outline-offset: 2px; }