/**
 * ContextNews / NewsPlatform 2026 — design tokens
 * Sync with design/design.json (single source of truth).
 * Use var(--ds-*) in components; prefer tokens over ad-hoc hex.
 */
:root {
  /* —— Primitive color —— */
  --ds-white: #ffffff;
  --ds-black: #000000;
  --ds-warm-page-tint: #fffbf7;
  --ds-warm-highlight: #fff4ec;
  --ds-gray-50: #f5f5f5;
  --ds-gray-100: #ebebeb;
  --ds-gray-200: #d6d6d6;
  --ds-gray-300: #b8b8b8;
  --ds-gray-400: #8e8e8e;
  --ds-gray-500: #6b6b6b;
  --ds-gray-600: #4a4a4a;
  --ds-gray-700: #333333;
  --ds-gray-800: #1a1a1a;
  --ds-gray-900: #121212;
  --ds-coral: #ff5a1f;
  /* Custom context builder + user-built context accent (gold) */
  --ds-custom-gold: #c5a059;
  --ds-custom-gold-hover: #a68542;
  --ds-custom-gold-muted: rgba(197, 160, 89, 0.16);
  --ds-coral-hover: #e64f1a;
  --ds-coral-muted: rgba(255, 90, 31, 0.14);
  --ds-gradient-coral-cta: linear-gradient(135deg, #ff7a45 0%, #ff4a00 100%);
  --ds-oauth-facebook: #1877f2;
  --ds-lavender-surface: #ebf2ff;
  --ds-mention-blue: #2563eb;
  --ds-like-pink: #ff85a1;
  --ds-gradient-splash: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%);

  /* —— Semantic (light) —— */
  --ds-canvas: var(--ds-white);
  --ds-canvas-muted: var(--ds-warm-page-tint);
  --ds-chrome: var(--ds-gray-900);
  --ds-chrome-elevated: var(--ds-black);
  --ds-text-primary: var(--ds-black);
  --ds-text-secondary: var(--ds-gray-600);
  --ds-text-tertiary: var(--ds-gray-400);
  --ds-text-on-dark: var(--ds-white);
  --ds-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --ds-text-link: var(--ds-coral);
  --ds-text-link-hover: var(--ds-coral-hover);
  --ds-text-mention: var(--ds-mention-blue);
  --ds-border-subtle: rgba(0, 0, 0, 0.06);
  --ds-border-default: rgba(0, 0, 0, 0.1);
  --ds-border-strong: rgba(0, 0, 0, 0.16);
  --ds-border-on-dark: rgba(255, 255, 255, 0.12);
  --ds-accent-primary: var(--ds-coral);
  --ds-accent-primary-muted: var(--ds-coral-muted);
  --ds-accent-social: var(--ds-like-pink);
  --ds-surface-card: var(--ds-white);
  --ds-surface-card-soft: var(--ds-lavender-surface);
  --ds-surface-ticker: var(--ds-gray-50);
  --ds-surface-thread: var(--ds-gray-50);
  --ds-surface-thread-nested: var(--ds-white);
  --ds-surface-composer: var(--ds-white);
  --ds-surface-overlay: rgba(0, 0, 0, 0.45);
  --ds-surface-hero-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 100%);
  --ds-divider: var(--ds-border-subtle);
  --ds-focus-ring: rgba(255, 90, 31, 0.45);
  --ds-state-danger: #dc2626;
  --ds-state-success: #16a34a;
  --ds-state-warning: #d97706;
  --ds-state-info: var(--ds-mention-blue);

  /* —— Typography —— */
  --ds-font-sans: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-display: var(--ds-font-sans);
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.8125rem;
  --ds-text-base: 1rem;
  --ds-text-md: 1.125rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: 1.5rem;
  --ds-text-2xl: 2rem;
  --ds-text-3xl: 2.5rem;
  --ds-text-hero: clamp(1.75rem, 4vw, 2rem);

  /* —— Spacing (scale) —— */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  /* Horizontal gutter for chrome, ticker, bento, footer (aligned column) */
  --ds-shell-inline-pad: clamp(var(--ds-space-4), 4vw, var(--ds-space-10));
  --ds-page-pad-x: var(--ds-shell-inline-pad);
  --ds-page-pad-y: var(--ds-space-8);
  --ds-card-padding: var(--ds-space-6);
  --ds-card-padding-lg: var(--ds-space-8);
  --ds-feed-stack-gap: var(--ds-space-8);
  --ds-grid-gap: var(--ds-space-6);

  /* —— Radius —— */
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 1rem;
  --ds-radius-lg: 1.25rem;
  --ds-radius-xl: 1.5rem;
  --ds-radius-2xl: 2rem;
  --ds-radius-bento: clamp(1.75rem, 3vw, 2.5rem);
  --ds-radius-pill: 9999px;
  --ds-radius-full: 50%;

  /* —— Shadow —— */
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --ds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
  --ds-shadow-focus: 0 0 0 3px var(--ds-focus-ring);
  /* Coral glow for badges, pills, emphasis (see shadow.coralAccent in design.json) */
  --ds-shadow-coral-accent: 0 8px 18px rgba(255, 90, 31, 0.28);
  --ds-shadow-coral-accent-strong: 0 10px 22px rgba(255, 90, 31, 0.38);

  /* —— Layout —— */
  /* Main content column max width (~1400px); centered with shell-inline-pad */
  --ds-content-max: 87.5rem;
  --ds-layout-max: 100%;
  --ds-rail-left: 17.5rem;
  --ds-rail-right: 20rem;
  --ds-top-nav-height: 4rem;
  --ds-ticker-height: 2.75rem;
  --ds-z-dropdown: 40;
  --ds-z-sticky: 30;
  --ds-z-reaction: 50;
  /* Must sit above .cn-sidenav-overlay (site.css uses ~999 on mobile) */
  --ds-z-modal: 1100;
  --ds-z-toast: 1200;

  /* —— Motion —— */
  --ds-duration-instant: 100ms;
  --ds-duration-fast: 180ms;
  --ds-duration-base: 240ms;
  --ds-duration-slow: 360ms;
  --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);
}