@charset "UTF-8";
/**
 * Design Tokens — 012-graphpaper
 *
 * Visual direction: Blueprint Blue — precise, technical, engineering paper
 * Primary  #1d4ed8 (HSL 224°) — blueprint blue, engineering precision
 * Accent   #64748b — slate/graphite, technical neutrality
 *
 * Typography: IBM Plex Sans (technical/engineering) + system-ui body
 * Spacing:    8px grid, standard personality
 * Radius:     Subtle (4/8/10px) — precise, not bubbly
 * Shadows:    Tinted with primary hue for brand coherence
 */

/* Google Fonts: IBM Plex Sans */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Primary: Blueprint Blue (HSL ~224°) ── */
  --site-primary:        #1d4ed8;
  --site-primary-hover:  #1e40af;
  --site-primary-dark:   #1e3a8a;
  --site-primary-light:  #eff6ff;
  --site-primary-border: #bfdbfe;

  /* ── Accent: Slate / Graphite ── */
  --site-accent:       #64748b;
  --site-accent-hover: #475569;
  --site-accent-dark:  #334155;

  /* ── Text ── */
  --site-text:       #0f172a;
  --site-text-muted: #64748b;
  --site-text-light: #475569;

  /* ── Background: Clean barely-blue-grey ── */
  --site-background:     #ffffff;
  --site-background-alt: #f8fafc;
  --site-surface:        #ffffff;

  /* ── Border ── */
  --site-border:      #e2e8f0;
  --site-border-dark: #cbd5e1;

  /* ── Shadows: blueprint-tinted ── */
  --shadow-sm: 0 1px 3px rgba(29, 78, 216, 0.06);
  --shadow-md: 0 4px 8px rgba(29, 78, 216, 0.09);
  --shadow-lg: 0 10px 20px rgba(29, 78, 216, 0.11);
  --shadow-xl: 0 20px 30px rgba(29, 78, 216, 0.13);

  /* ── Detail page tokens ── */
  --detail-bg-gradient-start: #ffffff;
  --detail-bg-gradient-end:   #eff6ff;
  --detail-card-shadow:       0 2px 8px rgba(29, 78, 216, 0.07);
  --detail-card-shadow-hover: 0 8px 24px rgba(29, 78, 216, 0.14);
  --detail-border-radius:     8px;
  --detail-theme-primary:     var(--site-primary);
  --detail-theme-secondary:   var(--site-primary-hover);
  --detail-theme-soft:        var(--site-primary-light);
  --detail-theme-border:      var(--site-primary-border);

  /* ── Border Radius: Subtle-professional ── */
  --radius-sm:     4px;
  --radius-button: 10px;
  --radius-card:   10px;
  --radius-pill:   9999px;

  /* ── Typography: IBM Plex Sans (technical precision) ── */
  --font-heading: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, monospace;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Transitions ── */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);

  /* ── Blueprint dot-grid pattern (body background) ── */
  --bg-dot-color:  #dbeafe;
  --bg-dot-size:   20px;

  /* ── Semantic colors (never change these) ── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
}