/* =============================================================================
 * lb-tokens — design tokens for the louisbecker.dev ecosystem
 * Version: 0.1.0
 *
 * Single source of truth for colour, typography, motion, and radius across:
 *   - quant-notes  (public face, louisbecker.dev — Quarto)
 *   - nestworth    (platform, app.louisbecker.dev — Django/Bootstrap 5.3)
 *
 * Contract:
 *   - Dark mode is the default. Light mode activates via
 *     `html[data-bs-theme="light"]` — the Bootstrap 5.3 colour-mode attribute,
 *     which both surfaces use (Quarto's toggle sets it natively; the Django
 *     platform sets it with a small toggle script + localStorage).
 *   - Consumers style components against `--color-*` / `--font-*` / `--radius-*`
 *     / `--motion-*` only. Bootstrap-styled components are bridged consumer-side
 *     by mapping `--bs-*` vars onto these tokens (see theme.scss in quant-notes
 *     for the reference implementation). No raw hex in consumer CSS.
 *   - Token names match the pre-extraction names in quant-notes theme.scss and
 *     landing.css 1:1 — adoption there is a delete-and-import, no renames.
 *
 * Origin: palette designed in quant-notes (2026); seeded from theme.scss +
 * landing.css. Status tokens (danger/warning) added at extraction for the
 * platform's finance semantics. All text-role colours pass WCAG AA against
 * their mode's --color-bg (ratios documented in lb-tokens ADR-0001).
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Mode-stable tokens — identical in dark and light
 * --------------------------------------------------------------------------- */

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Motion */
  --motion-fast: 0.2s;
  --motion-base: 0.4s;
  --motion-slow: 0.8s;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ---------------------------------------------------------------------------
 * Dark mode (default)
 * --------------------------------------------------------------------------- */

:root,
html[data-bs-theme="dark"] {
  /* Surfaces */
  --color-bg:            #050507;
  --color-surface:       #0c0c10;
  --color-surface-hover: #131319;

  /* Text */
  --color-text-primary:  #f5f5f7;
  --color-text-secondary:#8b8b94;
  --color-text-muted:    #5a5a62;

  /* Accent (brand violet) */
  --color-accent:        #8b85ff;
  --color-accent-hover:  #9d97ff;
  --color-accent-soft:   rgba(139, 133, 255, 0.15);
  --color-accent-border: rgba(139, 133, 255, 0.25);

  /* Status — positive */
  --color-success:       #2dd4bf;
  --color-success-soft:  rgba(45, 212, 191, 0.15);

  /* Status — negative (added in 0.1.0 for platform finance semantics) */
  --color-danger:        #f87171;
  --color-danger-soft:   rgba(248, 113, 113, 0.15);

  /* Status — caution (added in 0.1.0) */
  --color-warning:       #fbbf24;
  --color-warning-soft:  rgba(251, 191, 36, 0.15);

  /* Lines + texture */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.16);
  --color-grid:          rgba(255, 255, 255, 0.035);

  /* Decorative geometry (landing shapes; derived from brand colours) */
  --svg-circle-stroke:   rgba(139, 133, 255, 0.25);
  --svg-circle-fill:     rgba(139, 133, 255, 0.06);
  --svg-hex-stroke:      rgba(45, 212, 191, 0.3);
  --svg-line-stroke:     rgba(255, 255, 255, 0.08);
  --svg-dot-fill:        rgba(139, 133, 255, 0.6);
  --svg-dot-soft-fill:   rgba(45, 212, 191, 0.4);
  --svg-cross-1:         rgba(139, 133, 255, 0.5);
  --svg-cross-2:         rgba(45, 212, 191, 0.5);
  --svg-cross-3:         rgba(255, 255, 255, 0.3);
  --svg-vignette:        #050507;

  /* Imagery */
  --photo-border:        rgba(255, 255, 255, 0.12);
  --photo-glow:          rgba(139, 133, 255, 0.18);
}

/* ---------------------------------------------------------------------------
 * Light mode
 * --------------------------------------------------------------------------- */

html[data-bs-theme="light"] {
  /* Surfaces */
  --color-bg:            #fafafa;
  --color-surface:       #ffffff;
  --color-surface-hover: #f3f3f5;

  /* Text */
  --color-text-primary:  #0c0c10;
  --color-text-secondary:#5a5a62;
  --color-text-muted:    #8b8b94;

  /* Accent (brand violet) */
  --color-accent:        #6b66cc;
  --color-accent-hover:  #5953b8;
  --color-accent-soft:   rgba(107, 102, 204, 0.10);
  --color-accent-border: rgba(107, 102, 204, 0.20);

  /* Status — positive */
  --color-success:       #0d8a76;
  --color-success-soft:  rgba(13, 138, 118, 0.10);

  /* Status — negative */
  --color-danger:        #dc2626;
  --color-danger-soft:   rgba(220, 38, 38, 0.10);

  /* Status — caution */
  --color-warning:       #b45309;
  --color-warning-soft:  rgba(180, 83, 9, 0.10);

  /* Lines + texture */
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-hover:  rgba(0, 0, 0, 0.16);
  --color-grid:          rgba(0, 0, 0, 0.04);

  /* Decorative geometry */
  --svg-circle-stroke:   rgba(107, 102, 204, 0.30);
  --svg-circle-fill:     rgba(107, 102, 204, 0.05);
  --svg-hex-stroke:      rgba(13, 138, 118, 0.35);
  --svg-line-stroke:     rgba(0, 0, 0, 0.10);
  --svg-dot-fill:        rgba(107, 102, 204, 0.7);
  --svg-dot-soft-fill:   rgba(13, 138, 118, 0.5);
  --svg-cross-1:         rgba(107, 102, 204, 0.6);
  --svg-cross-2:         rgba(13, 138, 118, 0.6);
  --svg-cross-3:         rgba(0, 0, 0, 0.3);
  --svg-vignette:        #fafafa;

  /* Imagery */
  --photo-border:        rgba(0, 0, 0, 0.10);
  --photo-glow:          rgba(107, 102, 204, 0.12);
}