/*
 * BizChecker AI — shared design tokens (UIUX-1.1)
 *
 * Single semantic layer for marketing (dark-first) and report (light/system
 * via the existing body.light + localStorage `bca_th` toggle). Both surfaces
 * already switch with `body.light`; this file does NOT add prefers-color-scheme
 * on :root, because that would flip the marketing homepage without the toggle.
 *
 * Brand hex lives here. Pilot pages (index.html, report.html) alias their
 * legacy --bg/--t2/--p names to these tokens. Do not re-declare these
 * semantic names in other stylesheets.
 */

:root {
  /* ---- primitive: neutral scale ---- */
  --neutral-0: #ffffff;
  --neutral-50: #f7f6ff;
  --neutral-100: #f0eeff;
  --neutral-150: #e8e5ff;
  --neutral-200: #e0ddf8;
  --neutral-300: #c6c4ec;
  --neutral-400: #7d7daf;
  --neutral-500: #56527d;
  --neutral-600: #555578;
  --neutral-700: #3d3b60;
  --neutral-800: #14142a;
  --neutral-850: #0e0e1c;
  --neutral-900: #0a0a16;
  --neutral-950: #06060d;
  --neutral-1000: #040408;

  /* ---- primitive: brand ---- */
  --brand-400: #a78bff;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6937cf;
  --brand-800: #6423c9;
  --brand-900: #5b21b6;
  --brand-tint: rgba(124, 58, 237, .15);

  /* ---- primitive: verdict ---- */
  --verdict-success: #10b981;
  --verdict-success-strong: #066846;
  --verdict-success-tint: rgba(16, 185, 129, .12);
  --verdict-danger: #ef4444;
  --verdict-danger-strong: #b4232d;
  --verdict-warning: #f59e0b;
  --verdict-warning-strong: #925500;

  /* ---- semantic: ink / paper (dark default) ---- */
  --color-paper: var(--neutral-950);
  --color-paper-2: var(--neutral-900);
  --color-paper-3: var(--neutral-850);
  --color-paper-4: var(--neutral-800);
  --color-ink: #f2f1ff;
  --color-ink-muted: var(--neutral-300);
  --color-ink-subtle: var(--neutral-400);
  --color-ink-faint: var(--neutral-600);

  /* ---- semantic: glass (marketing elevation; unused on report) ---- */
  --color-glass: rgba(255, 255, 255, .035);
  --color-glass-strong: rgba(255, 255, 255, .06);

  /* ---- semantic: primary ---- */
  --color-primary: var(--brand-600);
  --color-primary-strong: var(--brand-500);
  --color-primary-soft: var(--brand-400);
  --color-primary-tint: var(--brand-tint);

  /* ---- semantic: verdict ---- */
  --color-success: var(--verdict-success);
  --color-success-tint: var(--verdict-success-tint);
  --color-danger: var(--verdict-danger);
  --color-warning: var(--verdict-warning);

  /* ---- semantic: border ---- */
  --color-border: rgba(255, 255, 255, .07);
  --color-border-strong: rgba(255, 255, 255, .12);
  --color-border-accent: rgba(139, 92, 246, .22);
  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* ---- semantic: spacing (4px scale; adopt later, do not rewrite markup now) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- semantic: layout (UIUX-1.4) ---- */
  --container-max: 1120px;
  --container-reading: 900px;
  --gutter: 28px;
  --section-y: 96px;
  --section-y-compact: 64px;

  /* ---- semantic: radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;

  /* ---- semantic: shadow ---- */
  --shadow-card: 0 4px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
  --shadow-lift: 0 10px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-glow: 0 0 32px rgba(124, 127, 255, .18);

  /* ---- semantic: z-index (adopt later) ---- */
  --z-base: 1;
  --z-raised: 2;
  --z-nav: 200;
  --z-dropdown: 200;
  --z-overlay: 500;
  --z-noise: 999;
  --z-modal: 1000;
  --z-popover: 9999;

  /* ---- type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, monospace;
}

body.light {
  --color-paper: var(--neutral-50);
  --color-paper-2: var(--neutral-100);
  --color-paper-3: var(--neutral-150);
  --color-paper-4: var(--neutral-200);
  --color-ink: #0d0c1a;
  --color-ink-muted: var(--neutral-700);
  --color-ink-subtle: var(--neutral-500);
  --color-ink-faint: var(--neutral-600);

  --color-glass: rgba(0, 0, 0, .035);
  --color-glass-strong: rgba(0, 0, 0, .06);

  --color-primary: var(--brand-800);
  --color-primary-strong: var(--brand-700);
  --color-primary-soft: var(--brand-900);

  --color-success: var(--verdict-success-strong);
  --color-danger: var(--verdict-danger-strong);
  --color-warning: var(--verdict-warning-strong);

  --color-border: rgba(0, 0, 0, .08);
  --color-border-strong: rgba(0, 0, 0, .12);
  --color-border-accent: rgba(124, 58, 237, .18);
}

/*
 * Layout + surface primitives (UIUX-1.4)
 *
 * One container, one section rhythm, three surfaces. A surface is flat by
 * default: no blur, no hover lift, no glow. Opt in to elevation or accent
 * explicitly with a modifier instead of giving every paragraph its own card.
 * Pilot usage: index.html #problem and #how, report.html #section-scoring.
 * Legacy .card / .wrap stay untouched until the remaining pages are moved.
 */
.ds-container {
  position: relative;
  z-index: var(--z-base);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ds-container--reading { max-width: var(--container-reading); }

.ds-section { padding-block: var(--section-y); }
.ds-section--compact { padding-block: var(--section-y-compact); }

.ds-surface {
  background: var(--color-paper-2);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-2xl);
}
.ds-surface--raised {
  background: var(--color-paper-3);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
.ds-surface--accent { border-color: var(--color-border-accent); }

.ds-data-panel {
  padding: var(--space-5) var(--space-6);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .ds-container { padding-inline: var(--space-4); }
  .ds-section { padding-block: var(--section-y-compact); }
}

@media print {
  .ds-surface, .ds-surface--raised {
    background: transparent;
    box-shadow: none;
    break-inside: avoid;
  }
}