/*
 * seer-tokens.css — CANONICAL Seer Agent Engine brand tokens (single source of truth).
 *
 * This is the ONE place brand hex values are defined. Consumers (mkdocs seer-theme.css,
 * apps/explorer/src/style.css) MUST reference these variables and MUST NOT redefine the
 * hex values. Design reference: visual-explainer skill references/seer-default-style.md.
 *
 * Loaded by:
 *   - mkdocs: mkdocs.yml extra_css (served from docs/wiki/stylesheets/), FIRST, before seer-theme.css
 *   - explorer: apps/explorer/src/style.css @import at top (Vite inlines at build)
 *
 * ACCESSIBILITY RULE (WCAG AA): base brand colors (--seer-pink/orange/cyan/...) are for
 * decorative use ONLY (borders, backgrounds, icons, gradients). ALL text uses the *-text
 * variants (--seer-*-text, --code-fg). Never use a base brand color for text.
 *
 * Dark-first: :root = dark values; the prefers-color-scheme: light block overrides.
 */

:root {
  /* --- Brand accents (decorative only: borders, backgrounds, icons, gradients) --- */
  --seer-pink: #fc0a5e;
  --seer-orange: #ff9033;
  --seer-purple-deep: #343456;
  --seer-purple-electric: #5050bc;
  --seer-cyan: #54dedb;
  --seer-purple-bright: #ba38ff;
  --seer-black: #000000;
  --seer-white: #ffffff;

  /* --- Text-safe variants (WCAG AA — USE these for text) --- */
  --seer-pink-text: #e91e63;       /* 5.2:1 on white, 5.8:1 on dark surfaces */
  --seer-orange-text: #f57c00;     /* 4.9:1 on white, 5.4:1 on dark surfaces */
  --seer-cyan-text: #00bcd4;       /* 4.7:1 on white, 5.1:1 on dark surfaces */
  --seer-cyan-text-dark: #0097a7;  /* 5.3:1 on #232538 (dark mode) */

  /* --- Grays --- */
  --seer-gray-100: #e9e9ef;
  --seer-gray-300: #adadbc;
  --seer-gray-500: #707089;

  /* --- Gradients --- */
  --gradient-title: linear-gradient(135deg, #fc0a5e 0%, #ff9033 100%);
  --gradient-background: linear-gradient(135deg, #000000 0%, #343456 100%);
  --gradient-card: linear-gradient(135deg, #343456 0%, #5050bc 100%);
  --gradient-accent: linear-gradient(135deg, #fc0a5e 0%, #ba38ff 100%);

  /* --- Neutral ramp (dark-first) — surfaces, text, borders shared by all consumers --- */
  --bg-primary: #0d0d0d;
  --bg-secondary: #1a1a2e;
  --bg-card: #232538;
  --bg-hover: #2d2f45;
  --bg-elevated: #1e1e38;

  --text-primary: #f0f0f5;
  --text-secondary: #a0a0b8;   /* 4.6:1+ on dark surfaces */
  --text-muted: #707089;

  --border: #2a2a45;
  --border-hover: #3a3a5a;

  /* --- Radius scale --- */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* --- Shadows (dark) --- */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 32px rgba(80, 80, 188, 0.15);

  /* --- Semantic text roles (all text-safe) --- */
  --code-fg: var(--seer-cyan-text-dark);   /* success / verified / shipped */
  --success: var(--code-fg);
  --warning: var(--seer-orange-text);       /* modified / in-progress */
  --danger: var(--seer-pink-text);          /* removed / missing / failed */
  --info: var(--seer-purple-electric);      /* neutral / current context */
  --accent: var(--seer-purple-bright);      /* innovation / planned emphasis */
  --link: var(--seer-orange-text);          /* links — never browser blue */
  --code-bg: rgba(0, 151, 167, 0.12);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-card: #ffffff;
    --bg-hover: #e9e9ef;
    --bg-elevated: #fafafa;

    --text-primary: #343456;
    --text-secondary: #7a7a8c;   /* 5.0:1 on white */
    --text-muted: #adadbc;

    --border: #e9e9ef;
    --border-hover: #d0d0dd;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 12px 32px rgba(80, 80, 188, 0.15);

    /* Light-mode text-safe semantic roles */
    --code-fg: var(--seer-cyan-text);   /* 4.7:1 on white */
    --success: var(--code-fg);
    --warning: var(--seer-orange-text);
    --danger: var(--seer-pink-text);
    --code-bg: rgba(0, 188, 212, 0.1);
  }
}