/*
 * TradeGospel shared visual foundation.
 *
 * This file is the stable token authority for public and authenticated pages.
 * It loads before page and component styles; scoped compatibility aliases keep
 * existing surfaces on the same palette while components migrate checkpoint by
 * checkpoint.
 */

:root {
  color-scheme: light;

  /* Brand Book 1.1 primitives. Roles are inherited by owned shadow roots. */
  --tg-brand-black: #000000;
  --tg-brand-white: #ffffff;
  --tg-brand-gold: #e4be66;
  --tg-brand-gold-deep: #785a16;
  --tg-brand-neutral-950: #101010;
  --tg-brand-neutral-900: #181818;
  --tg-brand-neutral-800: #262626;
  --tg-brand-neutral-700: #404040;
  --tg-brand-neutral-600: #666666;
  --tg-brand-neutral-500: #737373;
  --tg-brand-neutral-400: #a3a3a3;
  --tg-brand-neutral-300: #d4d4d4;
  --tg-brand-neutral-200: #e5e5e5;
  --tg-brand-neutral-100: #f5f5f5;

  /* Dark workspace default; public light compatibility remains scoped below. */
  --tg-brand-canvas: var(--tg-brand-black);
  --tg-brand-surface: var(--tg-brand-neutral-950);
  --tg-brand-raised: var(--tg-brand-neutral-900);
  --tg-brand-hover: var(--tg-brand-neutral-800);
  --tg-brand-text: var(--tg-brand-white);
  --tg-brand-secondary: var(--tg-brand-neutral-300);
  --tg-brand-muted: var(--tg-brand-neutral-400);
  --tg-brand-line: var(--tg-brand-neutral-700);
  --tg-brand-control-line: var(--tg-brand-neutral-500);
  --tg-brand-accent: var(--tg-brand-gold);
  --tg-brand-focus: var(--tg-brand-white);
  --tg-brand-chart: var(--tg-brand-white);
  --tg-brand-chart-secondary: var(--tg-brand-neutral-400);

  --tg-foundation-light-canvas: #ffffff;
  --tg-foundation-light-surface: #ffffff;
  --tg-foundation-light-surface-subtle: #f5f5f5;
  --tg-foundation-light-text: #000000;
  --tg-foundation-light-text-secondary: #404040;
  --tg-foundation-light-text-muted: #666666;
  --tg-foundation-light-structure: #d4d4d4;
  --tg-foundation-light-structure-strong: #737373;

  --tg-foundation-dark-canvas: #000000;
  --tg-foundation-dark-surface: #101010;
  --tg-foundation-dark-text: #ffffff;
  --tg-foundation-dark-text-muted: #a3a3a3;
  --tg-foundation-dark-structure: #404040;

  /* Semantic meaning remains in labels/signs/patterns, never in a gold result. */
  --tg-semantic-positive: #000000;
  --tg-semantic-positive-on-dark: #ffffff;
  --tg-semantic-negative: #666666;
  --tg-semantic-negative-on-dark: #a3a3a3;
  --tg-semantic-cost: #666666;
  --tg-semantic-cost-on-dark: #a3a3a3;
  --tg-semantic-evidence: #000000;
  --tg-semantic-evidence-on-dark: #ffffff;
  --tg-semantic-diagnosis: #404040;
  --tg-semantic-improvement: #404040;
  --tg-semantic-improvement-lime: #d4d4d4;
  --tg-semantic-warning: #666666;
  --tg-semantic-missing: #666666;
  --tg-semantic-focus: #000000;

  --tg-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --tg-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --tg-content-max: 1520px;
  --tg-page-gutter: 24px;
  --tg-grid-gap: 16px;
  --tg-control-min-size: 44px;
  --tg-radius-xs: 4px;
  --tg-radius-sm: 6px;
  --tg-radius-md: 8px;
  --tg-radius-card: 8px;
  --tg-shadow-card: 0 12px 30px rgba(0, 0, 0, .08);
  --tg-shadow-float: 0 24px 60px rgba(0, 0, 0, .16);
  --tg-shadow-focus: 0 0 0 4px rgba(255, 255, 255, .18);
}

/* Active light roles. Explicit dark-mode activation is added at its release gate. */
html body.launch-page,
html body.auth-page,
html body.policy-body,
html body.error-page,
html body.tg-theme-launch.workspace-visual-r1 {
  --tg-canvas: var(--tg-foundation-light-canvas);
  --tg-canvas-subtle: var(--tg-foundation-light-surface-subtle);
  --tg-surface-1: var(--tg-foundation-light-surface);
  --tg-surface-2: var(--tg-foundation-light-surface-subtle);
  --tg-surface-3: #e5e5e5;
  --tg-surface-4: #d4d4d4;
  --tg-surface-hover: #e5e5e5;
  --tg-surface-pressed: #d4d4d4;
  --tg-surface-overlay: rgba(255, 255, 255, .96);
  --tg-scrim: rgba(0, 0, 0, .58);
  --tg-text-primary: var(--tg-foundation-light-text);
  --tg-text-secondary: var(--tg-foundation-light-text-secondary);
  --tg-text-muted: var(--tg-foundation-light-text-muted);
  --tg-text-faint: #666666;
  --tg-text-inverse: var(--tg-foundation-dark-text);
  --tg-border-subtle: rgba(64, 64, 64, .16);
  --tg-border-default: var(--tg-foundation-light-structure);
  --tg-border-strong: var(--tg-foundation-light-structure-strong);
  --tg-grid: rgba(64, 64, 64, .14);
  --tg-focus: var(--tg-semantic-focus);
  --tg-positive: var(--tg-semantic-positive);
  --tg-negative: var(--tg-semantic-negative);
  --tg-cost: var(--tg-semantic-cost);
  --tg-info: var(--tg-semantic-evidence);
  --tg-diagnosis: var(--tg-semantic-diagnosis);
  --tg-improvement: var(--tg-semantic-improvement);

  /* Compatibility aliases for the current public and workspace styles. */
  --paper: var(--tg-canvas);
  --paper-2: var(--tg-canvas-subtle);
  --white: var(--tg-surface-1);
  --ink: var(--tg-text-primary);
  --ink-2: var(--tg-foundation-dark-surface);
  --muted: var(--tg-text-muted);
  --line: var(--tg-border-default);
  --acid: var(--tg-semantic-improvement-lime);
  --amber: var(--tg-semantic-cost);
  --focus: var(--tg-semantic-focus);
  --font: var(--tg-font-sans);
  --shell: min(var(--tg-content-max), calc(100vw - (2 * var(--tg-page-gutter))));

  --vf-paper: var(--tg-canvas);
  --vf-paper-deep: var(--tg-canvas-subtle);
  --vf-card: var(--tg-surface-1);
  --vf-ink: var(--tg-text-primary);
  --vf-muted: var(--tg-text-muted);
  --vf-line: var(--tg-border-default);
  --vf-side: var(--tg-foundation-dark-canvas);
  --vf-side-soft: var(--tg-foundation-dark-surface);
  --vf-teal: var(--tg-semantic-improvement);
  --vf-mint: var(--tg-semantic-positive-on-dark);
  --vf-acid: var(--tg-semantic-improvement-lime);
  --vf-blue: var(--tg-semantic-evidence);
  --vf-violet: var(--tg-semantic-diagnosis);
  --vf-amber: var(--tg-semantic-cost);
  --vf-red: var(--tg-semantic-negative);
}

html body.launch-page {
  --mint: var(--tg-semantic-positive-on-dark);
  --coral: var(--tg-semantic-negative-on-dark);
  --blue: var(--tg-semantic-evidence-on-dark);
}

html body.auth-page,
html body.policy-body,
html body.error-page,
html body.tg-theme-launch.workspace-visual-r1 {
  --mint: var(--tg-semantic-improvement);
  --mint-strong: var(--tg-semantic-positive);
  --coral: var(--tg-semantic-negative);
  --blue: var(--tg-semantic-evidence);
  --panel: var(--tg-surface-1);
  --deep: var(--tg-canvas);
  --cream: var(--tg-surface-1);
}

/* Public/auth light compatibility does not activate a workspace light theme. */
html body:is(.public-campaign-cp648, .auth-entry-cp646) {
  --tg-brand-canvas: var(--tg-brand-white);
  --tg-brand-surface: var(--tg-brand-neutral-100);
  --tg-brand-raised: var(--tg-brand-white);
  --tg-brand-hover: var(--tg-brand-neutral-200);
  --tg-brand-text: var(--tg-brand-black);
  --tg-brand-secondary: var(--tg-brand-neutral-700);
  --tg-brand-muted: var(--tg-brand-neutral-600);
  --tg-brand-line: var(--tg-brand-neutral-300);
  --tg-brand-control-line: var(--tg-brand-neutral-500);
  --tg-brand-accent: var(--tg-brand-gold-deep);
  --tg-brand-focus: var(--tg-brand-black);
}
html[data-theme="dark"] body:is(.public-campaign-cp648, .auth-entry-cp646) {
  --tg-brand-canvas: var(--tg-brand-black);
  --tg-brand-surface: var(--tg-brand-neutral-950);
  --tg-brand-raised: var(--tg-brand-neutral-900);
  --tg-brand-hover: var(--tg-brand-neutral-800);
  --tg-brand-text: var(--tg-brand-white);
  --tg-brand-secondary: var(--tg-brand-neutral-300);
  --tg-brand-muted: var(--tg-brand-neutral-400);
  --tg-brand-line: var(--tg-brand-neutral-700);
  --tg-brand-control-line: var(--tg-brand-neutral-500);
  --tg-brand-accent: var(--tg-brand-gold);
  --tg-brand-focus: var(--tg-brand-white);
}

@media (max-width: 720px) {
  :root {
    --tg-page-gutter: 16px;
    --tg-grid-gap: 12px;
  }
}