/* ==========================================================================
   not a square — design tokens (CANONICAL)
   Source of truth: ~/.claude/skills/design/code/nas-tokens.css
   Do not edit values inside projects — edit here, then re-copy.
   Usage: copy into the project (e.g. styles/nas-tokens.css), import first,
   and reference var(--nas-*) only. Never retype raw values.
   ========================================================================== */

/* Light mode (default) */
:root {
  /* Primary */
  --nas-primary: #0891b2;
  --nas-primary-hover: #0e7490;
  --nas-primary-subtle: #ecfeff;
  --nas-primary-border: #a5f3fc;

  /* Surfaces */
  --nas-surface: #ffffff;
  --nas-surface-raised: #f8fafc;
  --nas-surface-overlay: #f1f5f9;

  /* Borders */
  --nas-border: #e2e8f0;
  --nas-border-strong: #cbd5e1;

  /* Text */
  --nas-text-primary: #0f172a;
  --nas-text-secondary: #475569;
  --nas-text-tertiary: #94a3b8;
  --nas-text-muted: #cbd5e1;

  /* Status */
  --nas-success: #10b981;
  --nas-warning: #f59e0b;
  --nas-danger: #ef4444;
  --nas-info: #06b6d4;

  /* Shadows */
  --nas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --nas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --nas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Spacing (8px base) */
  --nas-space-xs: 4px;
  --nas-space-sm: 8px;
  --nas-space-md: 16px;
  --nas-space-lg: 24px;
  --nas-space-xl: 32px;
  --nas-space-2xl: 48px;
  --nas-space-3xl: 64px;

  /* Radius — never 0px anywhere */
  --nas-radius-sm: 6px;
  --nas-radius-md: 10px;
  --nas-radius-lg: 14px;
  --nas-radius-xl: 20px;

  /* Typography — pairing: Newsreader (editorial display) + Inter (UI) + JetBrains Mono */
  --nas-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nas-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --nas-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

/* Dark mode — applied via [data-theme="dark"] or .dark; mode is a per-piece art-direction decision */
[data-theme="dark"],
.dark {
  --nas-primary: #06b6d4;
  --nas-primary-hover: #22d3ee;
  --nas-primary-subtle: rgba(6, 182, 212, 0.1);
  --nas-primary-border: rgba(6, 182, 212, 0.2);

  --nas-surface: #0f1117;
  --nas-surface-raised: #161922;
  --nas-surface-overlay: #1e2130;

  --nas-border: rgba(255, 255, 255, 0.08);
  --nas-border-strong: rgba(255, 255, 255, 0.14);

  --nas-text-primary: #f1f5f9;
  --nas-text-secondary: #94a3b8;
  --nas-text-tertiary: #64748b;
  --nas-text-muted: #334155;

  --nas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --nas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --nas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Base typography — apply Inter with refined alternates */
.nas-base,
body.nas {
  font-family: var(--nas-font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: var(--nas-text-secondary);
  background: var(--nas-surface);
}

/* Type scale */
.nas-display  { font-size: 2.25rem;   font-weight: 700; line-height: 1.1;  letter-spacing: -0.025em; color: var(--nas-text-primary); }
.nas-h1       { font-size: 1.75rem;   font-weight: 600; line-height: 1.2;  letter-spacing: -0.02em;  color: var(--nas-text-primary); }
.nas-h2       { font-size: 1.375rem;  font-weight: 600; line-height: 1.3;  letter-spacing: -0.015em; color: var(--nas-text-primary); }
.nas-h3       { font-size: 1.125rem;  font-weight: 600; line-height: 1.4;  letter-spacing: -0.01em;  color: var(--nas-text-primary); }
.nas-body     { font-size: 0.9375rem; font-weight: 400; line-height: 1.6; }
.nas-body-sm  { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }
.nas-caption  { font-size: 0.6875rem; font-weight: 500; line-height: 1.4;  letter-spacing: 0.02em; color: var(--nas-text-tertiary); }
.nas-mono     { font-size: 0.8125rem; font-weight: 400; line-height: 1.5;  font-family: var(--nas-font-mono); }

/* Editorial voice — Newsreader for headlines, pull quotes, cover titles, hero
   figures in editorial contexts. Dense operator UI stays all-Inter. */
.nas-editorial { font-family: var(--nas-font-display); font-weight: 600; letter-spacing: -0.01em; }

/* Signature touch — 3px teal left border, one per view */
.nas-signature {
  border-left: 3px solid var(--nas-primary);
  padding-left: var(--nas-space-md);
}