/* ========================================================================== */
/*  Design Tokens – Semantic Foundation + Legacy Aliases                       */
/*  Rules:                                                                    */
/*  - Every token is defined exactly once per scope                            */
/*  - Semantic tokens are the single source of truth                           */
/*  - Legacy tokens are one-way aliases only                                   */
/* ========================================================================== */


/* ───────────────────────────── LIGHT THEME ───────────────────────────── */

:root {
  /* ── Brand ── */
  --brand-primary: #1e87f0;
  --brand-secondary: #f97316;
  --brand-accent: var(--brand-secondary);

  /* ── Surface ── */
  --surface-page: #f7f9fb;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-muted: #eef2f7;
  --surface-subtle: #f8fafc;
  --surface: var(--surface-section);
  --surface-card-hover: color-mix(
    in srgb,
    var(--surface-card) 84%,
    var(--surface-muted)
  );
  --surface-accent-primary-soft: color-mix(
    in srgb,
    var(--brand-primary) 12%,
    transparent
  );
  --surface-accent-soft: color-mix(
    in srgb,
    var(--brand-accent) 16%,
    transparent
  );
  --preview-card-bg: var(--surface-card);
  --preview-card-border: var(--border-muted);
  --preview-line: #d1d5db;
  --preview-line-accent: #94a3b8;
  --preview-media-start: #dbeafe;
  --preview-media-end: #bfdbfe;
  --preview-media-border: #cbd5e1;
  --preview-icon-bg: #c7d2fe;
  --preview-icon-tile-bg: var(--surface-card);
  --preview-icon-tile-border: #dfe7f3;
  --preview-badge-bg: #e0e7ff;
  --preview-badge-text: #1e3a8a;
  --preview-pill-bg: #c7d2fe;
  --preview-accordion-bg: var(--surface-card);
  --preview-accordion-border: #e5e7eb;
  --preview-metric-bg: var(--surface-card);
  --preview-metric-border: #dfe7f3;

  /* ── Text ── */
  --text-body: #111827;
  --text-heading: #0b1728;
  --text-muted: #4b5563;
  --text-on-primary: var(--contrast-text-on-primary, #ffffff);
  --text-on-secondary: var(--contrast-text-on-secondary, #ffffff);
  --text-on-accent: var(--contrast-text-on-accent, #ffffff);

  /* ── Spacing ── */
  --space-section: 2.25rem;

  /* ── Radius ── */
  --card-radius: 10px;

  /* ── Utility ── */
  --border-muted: #dfe3eb;
  --border-strong: color-mix(in srgb, var(--border-muted) 70%, #0b1728);
  --preview-outline: color-mix(
    in srgb,
    var(--border-muted) 80%,
    var(--brand-primary) 20%
  );
  --danger-500: #8b0000;
  --danger-600: #660000;

  /* ── Legacy aliases (one-way) ── */

  /* Backgrounds */
  --bg-page: var(--surface-page);
  --bg-section: var(--surface-section);
  --bg-card: var(--surface-card);
  --bg-surface: var(--surface-card);
  --bg-muted: var(--surface-muted);
  --bg-subtle: var(--surface-subtle);
  --bg-accent-soft: var(--surface-accent-soft);

  /* Text */
  --text-default: var(--text-body);
  --text-primary: var(--text-body);
  --text-secondary: var(--text-muted);
  --text-link: var(--brand-primary);

  /* Accent */
  --accent-primary: var(--brand-primary);
  --accent-secondary: var(--brand-secondary);
  --accent-color: var(--brand-primary);

  /* Layout */
  --section-gap: var(--space-section);

  /* Legacy component tokens */
  --qr-card: var(--surface-card);
  --qr-row: var(--surface-card);
  --qr-fg: var(--text-body);
}


/* ───────────────────────────── DARK THEME ───────────────────────────── */

:root[data-theme="dark"] {
  /* ── Brand ── */
  --brand-primary: #9fc5ff;
  --brand-secondary: #ff8a33;
  --brand-accent: var(--brand-secondary);

  /* ── Surface ── */
  --surface-page: #0a0d12;
  --surface-section: #111a24;
  --surface-card: #1a2636;
  --surface-muted: #0b111a;
  --surface-subtle: #0f1722;
  --surface: var(--surface-section);
  --surface-card-hover: color-mix(
    in srgb,
    var(--surface-card) 78%,
    var(--surface-muted)
  );
  --surface-accent-primary-soft: color-mix(
    in srgb,
    var(--brand-primary) 20%,
    transparent
  );
  --surface-accent-soft: color-mix(
    in srgb,
    var(--brand-accent) 24%,
    transparent
  );
  --preview-card-bg: var(--surface-card);
  --preview-card-border: var(--border-muted);
  --preview-line: #4b5f7a;
  --preview-line-accent: #6b7ea0;
  --preview-media-start: #1f2a3d;
  --preview-media-end: #2b3b57;
  --preview-media-border: #31445f;
  --preview-icon-bg: #42567a;
  --preview-icon-tile-bg: var(--surface-card);
  --preview-icon-tile-border: #31445f;
  --preview-badge-bg: #2f3f5f;
  --preview-badge-text: #e7efff;
  --preview-pill-bg: #42567a;
  --preview-accordion-bg: var(--surface-card);
  --preview-accordion-border: #31445f;
  --preview-metric-bg: var(--surface-card);
  --preview-metric-border: #31445f;

  /* ── Text ── */
  --text-body: #f2f5fa;
  --text-heading: #ffffff;
  --text-muted: #e0e6f1;
  --text-on-primary: var(--contrast-text-on-primary, #ffffff);
  --text-on-secondary: var(--contrast-text-on-secondary, #ffffff);
  --text-on-accent: var(--contrast-text-on-accent, #ffffff);

  /* ── Contrast overrides ──
     namespace-tokens.css sets these to #000000 for light surfaces.
     In dark mode the surfaces are dark, so text must be light. */
  --contrast-text-on-surface: #f2f5fa;
  --contrast-text-on-surface-muted: #f2f5fa;
  --contrast-text-on-page: #f2f5fa;
  --color-text: #f2f5fa;

  /* ── Spacing ── */
  --space-section: 2.25rem;

  /* ── Radius ── */
  --card-radius: 10px;

  /* ── Utility ── */
  --border-muted: #3b4c63;
  --border-strong: color-mix(in srgb, var(--border-muted) 60%, #ffffff);
  --preview-outline: color-mix(
    in srgb,
    var(--border-muted) 70%,
    var(--brand-primary) 30%
  );
  --danger-500: #ff7b86;
  --danger-600: #ff5c6b;

  /* ── Legacy aliases (one-way) ── */

  /* Backgrounds */
  --bg-page: var(--surface-page);
  --bg-section: var(--surface-section);
  --bg-card: var(--surface-card);
  --bg-surface: var(--surface-card);
  --bg-muted: var(--surface-muted);
  --bg-subtle: var(--surface-subtle);
  --bg-accent-soft: var(--surface-accent-soft);

  /* Text */
  --text-default: var(--text-body);
  --text-primary: var(--text-body);
  --text-secondary: var(--text-muted);
  --text-link: var(--brand-primary);

  /* Accent */
  --accent-primary: var(--brand-primary);
  --accent-secondary: var(--brand-secondary);
  --accent-color: var(--brand-primary);

  /* Layout */
  --section-gap: var(--space-section);

  /* Legacy component tokens */
  --qr-card: var(--surface-card);
  --qr-row: var(--surface-card);
  --qr-fg: var(--text-body);
}