/*
 * Noteworthy News V2 — Design Tokens
 *
 * Single source of truth for the visual system.
 * Every other stylesheet consumes these variables — never raw values.
 */

:root {

  /* ── Spacing ────────────────────────────────────── */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ── Typography — Families ─────────────────────── */
  --font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* ── Typography — Scale ────────────────────────── */
  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3rem;      /* 48px */

  /* ── Typography — Weights ──────────────────────── */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* ── Typography — Line Heights ─────────────────── */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  /* ── Typography — Tracking ────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.14em;

  /* ── Colors — Backgrounds ──────────────────────── */
  --color-bg:          #080E1A;
  --color-bg-secondary:#0C1422;
  --color-bg-elevated: #111C2E;
  --color-bg-card:     #131F33;
  --color-bg-surface:  #182640;

  /* ── Colors — Core ─────────────────────────────── */
  --color-white:        #F0F2F5;
  --color-white-pure:   #ffffff;

  /* ── Colors — Accent ───────────────────────────── */
  --color-accent:       #3B8BF2;
  --color-accent-hover: #5BA0F5;
  --color-accent-muted: rgba(59, 139, 242, 0.10);
  --color-accent-subtle: rgba(59, 139, 242, 0.04);
  --color-accent-border: rgba(59, 139, 242, 0.18);
  --color-accent-ring:  rgba(59, 139, 242, 0.25);
  --color-accent-rgb:   59, 139, 242;

  /* ── Colors — Signal ───────────────────────────── */
  --color-live:         #EF4444;
  --color-live-muted:   rgba(239, 68, 68, 0.12);
  --color-success:      #22C55E;
  --color-success-muted: rgba(34, 197, 94, 0.10);
  --color-success-border: rgba(34, 197, 94, 0.18);
  --color-warning:      #EAB308;
  --color-warning-rgb:  234, 179, 8;
  --color-warning-muted: rgba(234, 179, 8, 0.10);
  --color-warning-border: rgba(234, 179, 8, 0.18);
  --color-error:        #EF4444;
  --color-error-muted:  rgba(239, 68, 68, 0.08);
  --color-error-border: rgba(239, 68, 68, 0.18);

  /* ── Colors — Text ─────────────────────────────── */
  --color-text:           rgba(240, 242, 245, 0.95);
  --color-text-secondary: rgba(240, 242, 245, 0.55);
  --color-text-muted:     rgba(240, 242, 245, 0.32);

  /* ── Colors — Borders ──────────────────────────── */
  --color-border:       rgba(240, 242, 245, 0.06);
  --color-border-hover: rgba(240, 242, 245, 0.12);
  --color-border-focus: rgba(59, 139, 242, 0.5);
  --color-rule:         rgba(240, 242, 245, 0.08);

  /* ── Radius ────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.4);

  /* ── Motion ────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-normal: 180ms;
  --duration-slow:   280ms;
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  /* ── Gradients ────────────────────────────────── */
  --gradient-accent: linear-gradient(135deg, #3B8BF2, #60A5FA);
  --gradient-glow:   radial-gradient(ellipse, rgba(59, 139, 242, 0.12) 0%, transparent 70%);

  /* ── Glass ─────────────────────────────────────── */
  --glass-bg:     rgba(8, 14, 26, 0.82);
  --glass-blur:   blur(20px);
  --glass-border: rgba(240, 242, 245, 0.05);

  /* ── Z-Index ───────────────────────────────────── */
  --z-base:     1;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;

  /* ── Layout ────────────────────────────────────── */
  --container-max: 1120px;
  --container-narrow: 640px;
  --header-height: 3.25rem;
}

/* ── Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive Token Overrides ──────────────────── */
@media (min-width: 768px) {
  :root {
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.5rem;
    --header-height: 3.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-4xl: 3.25rem;
    --text-5xl: 3.75rem;
  }
}