// Design tokens for DAEV Arbiter — pinned to Aelethion brand teal #006876
// Site teal #006876 ≈ oklch(0.482 0.074 196). On dark backgrounds we add a
// brighter on-graph variant so causal nodes/edges stay legible while the base
// hex (used for CTAs, borders, fills) matches the site exactly.
const ACCENTS = {
  teal:   { h: 196, c: 0.074, name: 'teal',   hex: '#006876' },
  blue:   { h: 220, c: 0.15,  name: 'blue',   hex: null },
  violet: { h: 265, c: 0.16,  name: 'violet', hex: null },
  amber:  { h: 95,  c: 0.14,  name: 'amber',  hex: null },
};

function buildTokens({ mode = 'dark', accentKey = 'teal' } = {}) {
  const a = ACCENTS[accentKey] || ACCENTS.teal;
  const dark = mode === 'dark';
  const surf = dark
    ? {
        // Pinned to the site's --ae-dark family from daev-page-integrated.html
        bg0: '#0d1117',                                  // --ae-dark — page surface
        bg1: '#11161e',                                  // primary card surface
        bg2: '#161c25',                                  // hover / secondary card surface
        bg3: '#07090c',                                  // --ae-darker — inner terminal/code surface
        line: 'rgba(255,255,255,0.08)',                  // --ae-edge-dark
        line2: 'rgba(255,255,255,0.14)',                 // --ae-edge-strong
        fg0: '#ffffff',                                  // primary text
        fg1: 'rgba(255,255,255,0.78)',
        fg2: 'rgba(255,255,255,0.55)',                   // muted / secondary
        fg3: 'rgba(255,255,255,0.40)',                   // tertiary
      }
    : {
        // Pinned to the site's #F7F6F2 page surface, #ffffff cards, edge tones from the marketing page
        bg0: '#F7F6F2',                                  // page bg — same as site --ae-bg
        bg1: '#ffffff',                                  // primary card bg
        bg2: '#F0EFEA',                                  // secondary card / hover surface
        bg3: '#E6E4DC',                                  // tertiary card / pressed surface
        line: 'rgba(0,104,118,0.10)',                    // matches site --ae-edge-light
        line2: 'rgba(0,104,118,0.22)',                   // matches site --ae-edge-strong
        fg0: '#1A1917',                                  // matches site --ae-ink
        fg1: '#2D2A26',
        fg2: '#4a5568',                                  // matches site --ae-grey
        fg3: '#6B7280',
      };

  // Accent: site teal #006876 as base; brighter ghost for on-dark glow
  const isAelethionTeal = accentKey === 'teal';
  const accent = isAelethionTeal ? {
    base:  '#006876',                              // exact site teal
    dim:   'rgba(0,104,118,0.78)',
    soft:  'rgba(0,104,118,0.32)',
    ghost: 'rgba(0,104,118,0.18)',
    hue: a.h, chroma: a.c,
  } : {
    base:  `oklch(0.70 ${a.c} ${a.h})`,
    dim:   `oklch(0.55 ${a.c * 0.8} ${a.h})`,
    soft:  `oklch(0.30 ${a.c * 0.5} ${a.h})`,
    ghost: `oklch(0.22 ${a.c * 0.3} ${a.h} / 0.35)`,
    hue: a.h, chroma: a.c,
  };

  const semantic = {
    red:     dark ? 'oklch(0.66 0.20 25)'  : '#C0392B',
    redDim:  dark ? 'oklch(0.48 0.16 25)'  : 'rgba(192,57,43,0.7)',
    redBg:   dark ? 'rgba(192,57,43,0.32)' : 'rgba(192,57,43,0.10)',
    green:   dark ? 'oklch(0.72 0.17 150)' : '#1b9663',
    greenBg: dark ? 'rgba(56,161,105,0.30)' : 'rgba(56,161,105,0.12)',
    amber:   dark ? 'oklch(0.78 0.15 75)'  : '#DA7101',
    amberBg: dark ? 'rgba(218,113,1,0.30)'  : 'rgba(218,113,1,0.14)',
  };
  return {
    mode, accentKey, ...surf, accent, semantic,
    font: {
      ui: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
      mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace',
    },
    radius: { sm: 4, md: 6, lg: 8, xl: 12 },  // aligned to site's 8px button radius
    space: { 1:4, 2:8, 3:12, 4:16, 5:20, 6:24, 7:32, 8:40, 9:56, 10:72 },
  };
}

window.DAEV_ACCENTS = ACCENTS;
window.DAEV_buildTokens = buildTokens;