// src/framework/theme/tokens.ts
//
// Matrix Design Tokens — semantic CSS custom properties.
//
// Every token becomes a --mx-<name> CSS custom property.
// Components use var(--mx-<name>, <fallback>) in their shadow DOM styles.
// CSS custom properties cascade through shadow DOM boundaries automatically.

/**
 * Full set of Matrix theme tokens.
 * Each key maps to a --mx-<key> CSS custom property.
 */
export interface MxThemeTokens {
  // ── Surface ────────────────────────────────────────────────────────
  'color-surface': string;          // main background
  'color-surface-alt': string;      // alternate background (panels, cards, tab bars)
  'color-surface-hover': string;    // hover state background
  'color-surface-inset': string;    // inset/sunken areas (inputs, code blocks)

  // ── Primary ────────────────────────────────────────────────────────
  'color-primary': string;          // brand/accent color (buttons, active indicators)
  'color-primary-hover': string;    // primary hover state
  'color-primary-text': string;     // text on primary-colored backgrounds

  // ── Text ───────────────────────────────────────────────────────────
  'color-text': string;             // primary text
  'color-text-secondary': string;   // secondary / less prominent text
  'color-text-muted': string;       // placeholder, disabled, decorative text

  // ── Border ─────────────────────────────────────────────────────────
  'color-border': string;           // standard border
  'color-border-light': string;     // subtle / inner border

  // ── Status ─────────────────────────────────────────────────────────
  'color-success': string;          // success indicators, connected
  'color-error': string;            // error indicators, destructive actions
  'color-warning': string;          // warning indicators

  // ── Interactive ────────────────────────────────────────────────────
  'color-focus-ring': string;       // focus outline / ring
  'color-link': string;             // hyperlinks, clickable text

  // ── Structural ─────────────────────────────────────────────────────
  'radius-sm': string;              // small radius (buttons, tags)
  'radius-md': string;              // medium radius (cards, panels)
  'radius-lg': string;              // large radius (modals, popovers)
  'shadow-sm': string;              // subtle shadow
  'shadow-md': string;              // card/panel shadow

  // ── Typography ─────────────────────────────────────────────────────
  'font-family': string;            // base font stack
  'font-mono': string;              // monospace font stack
  'font-size-sm': string;           // small text (labels, captions)
  'font-size-base': string;         // base text size
  'font-size-lg': string;           // section headings (18px)
  'font-size-xl': string;           // page headings (20px)
  'font-size-2xl': string;          // hero headings (24px)

  // ── Spacing (8px base grid) ───────────────────────────────────────
  'space-1': string;                // 4px
  'space-2': string;                // 8px
  'space-3': string;                // 12px
  'space-4': string;                // 16px
  'space-6': string;                // 24px
  'space-8': string;                // 32px
  'space-12': string;               // 48px

  // ── Extended structural ───────────────────────────────────────────
  'radius-full': string;            // pill shapes (badges, status bars)
  'shadow-lg': string;              // elevated dialogs
}

/**
 * Light theme — matches current FlowPad appearance.
 * Blue primary, white surfaces, slate text.
 */
export const MX_THEME_LIGHT: MxThemeTokens = {
  // Surface
  'color-surface':        '#ffffff',
  'color-surface-alt':    '#f4f8ff',
  'color-surface-hover':  '#e9f1ff',
  'color-surface-inset':  '#f1f5f9',

  // Primary
  'color-primary':        '#2563eb',
  'color-primary-hover':  '#1d4ed8',
  'color-primary-text':   '#ffffff',

  // Text
  'color-text':           '#1e293b',
  'color-text-secondary': '#64748b',
  'color-text-muted':     '#94a3b8',

  // Border
  'color-border':         '#d7e2ef',
  'color-border-light':   '#e2e8f0',

  // Status
  'color-success':        '#16a34a',
  'color-error':          '#dc2626',
  'color-warning':        '#f59e0b',

  // Interactive
  'color-focus-ring':     '#93c5fd',
  'color-link':           '#2563eb',

  // Structural
  'radius-sm':            '3px',
  'radius-md':            '6px',
  'radius-lg':            '8px',
  'shadow-sm':            '0 1px 2px rgba(0,0,0,0.05)',
  'shadow-md':            '0 2px 8px rgba(0,0,0,0.1)',

  // Typography
  'font-family':          "system-ui, -apple-system, 'Segoe UI', sans-serif",
  'font-mono':            "'Fira Code', 'Cascadia Code', 'Consolas', monospace",
  'font-size-sm':         '11px',
  'font-size-base':       '13px',
  'font-size-lg':         '1.125rem',
  'font-size-xl':         '1.25rem',
  'font-size-2xl':        '1.5rem',

  // Spacing (8px base grid)
  'space-1':              '0.25rem',
  'space-2':              '0.5rem',
  'space-3':              '0.75rem',
  'space-4':              '1rem',
  'space-6':              '1.5rem',
  'space-8':              '2rem',
  'space-12':             '3rem',

  // Extended structural
  'radius-full':          '9999px',
  'shadow-lg':            '0 10px 15px rgba(0,0,0,0.1)',
};

/**
 * Dark theme — Slate Midnight palette.
 * Subtle blue undertone (Tailwind slate series), modern and readable.
 * Accent colors chosen to work as header backgrounds with white text.
 */
export const MX_THEME_DARK: MxThemeTokens = {
  // Surface — 4-level hierarchy for visual depth
  'color-surface':        '#0f172a',   // slate-900 — deepest background
  'color-surface-alt':    '#1e293b',   // slate-800 — panels, sidebars, tab bars
  'color-surface-hover':  '#334155',   // slate-700 — hover states, selected items
  'color-surface-inset':  '#020617',   // slate-950 — code editor, inputs (darkest)

  // Primary — blue-500/400, works as header bg AND accent highlights
  'color-primary':        '#3b82f6',   // blue-500
  'color-primary-hover':  '#60a5fa',   // blue-400 (lighter on hover)
  'color-primary-text':   '#ffffff',

  // Text — high contrast, off-white primary
  'color-text':           '#f1f5f9',   // slate-100
  'color-text-secondary': '#94a3b8',   // slate-400
  'color-text-muted':     '#475569',   // slate-600

  // Border — subtle but visible separation
  'color-border':         '#334155',   // slate-700
  'color-border-light':   '#1e293b',   // slate-800

  // Status — saturated enough for visibility on dark bg
  'color-success':        '#22c55e',   // green-500
  'color-error':          '#ef4444',   // red-500
  'color-warning':        '#f59e0b',   // amber-500

  // Interactive
  'color-focus-ring':     '#3b82f6',   // blue-500
  'color-link':           '#60a5fa',   // blue-400

  // Structural — slightly larger radii, stronger shadows
  'radius-sm':            '4px',
  'radius-md':            '6px',
  'radius-lg':            '10px',
  'shadow-sm':            '0 1px 3px rgba(0,0,0,0.4)',
  'shadow-md':            '0 4px 12px rgba(0,0,0,0.5)',

  // Typography
  'font-family':          "system-ui, -apple-system, 'Segoe UI', sans-serif",
  'font-mono':            "'Fira Code', 'Cascadia Code', 'Consolas', monospace",
  'font-size-sm':         '11px',
  'font-size-base':       '13px',
  'font-size-lg':         '1.125rem',
  'font-size-xl':         '1.25rem',
  'font-size-2xl':        '1.5rem',

  // Spacing (8px base grid)
  'space-1':              '0.25rem',
  'space-2':              '0.5rem',
  'space-3':              '0.75rem',
  'space-4':              '1rem',
  'space-6':              '1.5rem',
  'space-8':              '2rem',
  'space-12':             '3rem',

  // Extended structural
  'radius-full':          '9999px',
  'shadow-lg':            '0 10px 15px rgba(0,0,0,0.15)',
};

/** All built-in presets keyed by name. */
export const MX_THEME_PRESETS: Record<string, MxThemeTokens> = {
  light: MX_THEME_LIGHT,
  dark:  MX_THEME_DARK,
};
