/* File: assets/css/tokens.css */
/* Design tokens (single source of truth). */

:root{
  /* Typography */
  --dag-font: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --dag-font-display: var(--font-head, var(--dag-font));
  --dag-lh: 1.6;

  /* Layout */
  --dag-container: 1160px;
  --dag-gutter: 18px;
  --dag-gutter-lg: 26px;
  --dag-section: 64px;

  /* Core palette (dark) */
  --dag-bg: #0b1220;
  --dag-surface: #111a2b;
  --dag-surface-2: rgba(255,255,255,.04);
  --dag-text: #e5e7eb;
  --dag-muted: #98a2b3;
  --dag-border: rgba(255,255,255,.12);

  /* Brand */
  --dag-primary: #e11d48;
  --dag-primary-hover: #be123c;
  --dag-primary-contrast: #ffffff;

  --dag-accent: #22c55e;
  --dag-accent-hover: #16a34a;
  --dag-accent-contrast: #071a0c;

  --dag-link: #60a5fa;
  --dag-link-hover: #93c5fd;

  /* Status */
  --dag-danger: #dc2626;
  --dag-warning: #d97706;
  --dag-success: #16a34a;

  /* Radius */
  --dag-radius-sm: 12px;
  --dag-radius-md: 16px;
  --dag-radius-lg: 20px;

  /* Elevation */
  --dag-shadow-sm: 0 1px 2px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.24);
  --dag-shadow-md: 0 10px 40px rgba(0,0,0,.30);

  /* Spacing */
  --dag-gap-sm: 12px;
  --dag-gap: 16px;
  --dag-gap-lg: 24px;
  --dag-gap-xl: 32px;

  /* Interaction */
  --dag-ring-color: rgba(96,165,250,.26);
  --dag-ring: 0 0 0 4px var(--dag-ring-color);
  --dag-transition: 160ms cubic-bezier(.2,.8,.2,1);

  /* Misc */
  --dag-max-prose: 72ch;

  /* Back-compat aliases (keep existing CSS stable) */
  --dag-radius: var(--dag-radius-md);
  --dag-shadow: var(--dag-shadow-sm);

  --bg: var(--dag-bg);
  --surface: var(--dag-surface);
  --surface-2: var(--dag-surface-2);
  --text: var(--dag-text);
  --muted: var(--dag-muted);
  --line: var(--dag-border);
  --border: var(--dag-border);

  --primary: var(--dag-primary);
  --primary-contrast: var(--dag-primary-contrast);
  --accent: var(--dag-accent);

  --brand: var(--dag-link);
  --brand-2: var(--dag-accent);
  --danger: var(--dag-danger);

  --radius: var(--dag-radius-md);
  --shadow: var(--dag-shadow-md);
  --shadow-soft: var(--dag-shadow-sm);

  --container: var(--dag-container);
  --gutter: var(--dag-gutter);

  /* Legacy focus variable used by style.css */
  --ring: var(--dag-ring-color);
}

@media (max-width: 900px){
  :root{
    --dag-section: 44px;
    --dag-gutter-lg: 18px;
  }
}

@media (max-width: 600px){
  :root{
    --dag-section: 34px;
    --dag-gutter: 16px;
  }
}