// tokens.jsx — Design tokens for the Infinity European Platform deck system.
// Palette strictly within Infinity / MFE / AdManager brand.

const FONT_DISPLAY = '"Montserrat", system-ui, sans-serif';
const FONT_MONO = '"JetBrains Mono", ui-monospace, monospace';

// Base ink & neutrals
const Tokens = {
  fontDisplay: FONT_DISPLAY,
  fontMono: FONT_MONO,

  // Type weights — match AdManager scale
  weight: {
    regular: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800, black: 900,
  },

  // Neutrals (verified from AdManager design system)
  ink: '#FFFFFF',
  inkDim: 'rgba(255,255,255,0.75)',
  inkSoft: 'rgba(255,255,255,0.55)',
  inkFaint: 'rgba(255,255,255,0.30)',
  inkLine: 'rgba(255,255,255,0.16)',
  inkBlack: '#000000',

  // Core brand
  purple50:  '#F9F2FF',
  purple100: '#EAD6FD',
  purple200: '#DAB6FC',
  purple300: '#C996FA',
  purple400: '#B975F9',
  purple500: '#A855F7',
  purple600: '#8F48D2',  // ★ primary
  purple700: '#7E22CE',
  purple800: '#763CAD',
  purple900: '#5C2F88',
  purple950: '#432263',

  indigo400: '#818CF8',
  indigo500: '#6366F1',
  indigo600: '#5457CD',
  indigo700: '#4547A9',

  blue500: '#3B82F6',
  blue600: '#2563EB',
  cyan400: '#22D3EE',
  cyan500: '#06B6D4',
  navy:    '#022354',

  // Accents (use sparingly)
  accentRed:    '#E03C5C',  // for "STORY 0X" labels and rare accents
  accentOrange: '#F7931A',
  accentGold:   '#F3C02F',
  accentGreen:  '#27AE60',

  // Near-black surfaces
  bg:           '#0A0A0F',
  bgSurface:    '#13111A',
  bgDeep:       '#191425',

  // Radii
  radius: { sm: 6, md: 10, lg: 16, xl: 22, xxl: 28, pill: 999 },
};

// ───────────────────────────────────────────────────────────────────────────
// SCHEMES — Each slide picks a Scheme. All within Infinity gamut.
// Schemes drive: background, hero card fill (when no image), accent for stat
// + STORY label, corner-brackets color.
// ───────────────────────────────────────────────────────────────────────────
const SCHEMES = {
  // Deep purple primary — the "main" Infinity scheme
  purpleDeep: {
    id: 'purpleDeep',
    name: 'Purple Deep',
    bg: '#1A0A2E',
    bgGradient: 'radial-gradient(ellipse 1600px 900px at 50% 30%, #2A1450 0%, #1A0A2E 55%, #0A0A0F 100%)',
    surface: '#241537',
    accent: Tokens.purple400,   // light purple for stat
    accentBold: Tokens.purple600,
    brackets: Tokens.purple300,
    storyLabel: Tokens.accentRed,
    text: Tokens.ink,
    textDim: Tokens.inkDim,
  },
  // Mid purple-blue — softer
  purpleBlue: {
    id: 'purpleBlue',
    name: 'Purple Blue',
    bg: '#1A1A3E',
    bgGradient: 'radial-gradient(ellipse 1600px 900px at 50% 20%, #2D2B6E 0%, #1A1A3E 55%, #0A0A1F 100%)',
    surface: '#252452',
    accent: '#A0B4FF',
    accentBold: Tokens.indigo500,
    brackets: '#A0B4FF',
    storyLabel: Tokens.accentRed,
    text: Tokens.ink,
    textDim: Tokens.inkDim,
  },
  // Black + purple accent — high contrast
  nearBlack: {
    id: 'nearBlack',
    name: 'Near Black',
    bg: '#0A0A0F',
    bgGradient: 'radial-gradient(ellipse 1400px 700px at 50% 30%, #1A1024 0%, #0A0A0F 60%, #000000 100%)',
    surface: '#161320',
    accent: Tokens.purple300,
    accentBold: Tokens.purple500,
    brackets: Tokens.purple300,
    storyLabel: Tokens.accentRed,
    text: Tokens.ink,
    textDim: Tokens.inkDim,
  },
  // Navy — for "structure" or data slides
  navy: {
    id: 'navy',
    name: 'Navy',
    bg: '#0A1430',
    bgGradient: 'radial-gradient(ellipse 1600px 900px at 50% 30%, #14245A 0%, #0A1430 55%, #050A1C 100%)',
    surface: '#152042',
    accent: Tokens.cyan400,
    accentBold: Tokens.cyan500,
    brackets: Tokens.cyan400,
    storyLabel: Tokens.accentRed,
    text: Tokens.ink,
    textDim: Tokens.inkDim,
  },
  // Magenta-purple accent — for "fandom"/emotion-heavy slides
  magenta: {
    id: 'magenta',
    name: 'Magenta',
    bg: '#2A0E2F',
    bgGradient: 'radial-gradient(ellipse 1600px 900px at 50% 30%, #4A1750 0%, #2A0E2F 55%, #0F0517 100%)',
    surface: '#3A1741',
    accent: '#F7A1DC',
    accentBold: '#D147A3',
    brackets: '#F7A1DC',
    storyLabel: Tokens.accentRed,
    text: Tokens.ink,
    textDim: Tokens.inkDim,
  },
};

// ───────────────────────────────────────────────────────────────────────────
// Card panel colors for multi-card grids (Template D)
// Each card half-image + half-panel uses one of these.
// All inside the Infinity gamut.
// ───────────────────────────────────────────────────────────────────────────
const CARD_PANELS = {
  purpleLight: { fill: '#C996FA', text: '#2A0F4E' },
  purpleMid:   { fill: '#8F48D2', text: '#FFFFFF' },
  indigo:      { fill: '#6366F1', text: '#FFFFFF' },
  navy:        { fill: '#1E2C5E', text: '#FFFFFF' },
  pink:        { fill: '#E0A8E8', text: '#3A0F3F' },
  cyan:        { fill: '#06B6D4', text: '#062436' },
};

Object.assign(window, { Tokens, SCHEMES, CARD_PANELS, FONT_DISPLAY, FONT_MONO });