/* ===================================================================
   MEDIATEA — Design Tokens
   
   Single source of truth for all visual properties.
   Every component and mockup imports this file.
   
   Design Direction:
   - Go Club: bold pastel background, floating white cards
   - Apple News: editorial layout, hero images, serif headlines
   - The Atlantic: handwritten human elements, editorial craft
   =================================================================== */

:root {
  /* ═══ Background & Surface ═══ */
  --bg-primary: #F2F2F7;           /* Light gray — main feed background */
  --bg-primary-deep: #E5E5EA;      /* Slightly deeper gray for depth */
  --bg-secondary: #E8D8E8;         /* Soft lavender — accent sections */
  --bg-tertiary: #F5E6D0;          /* Warm peach — dashboard accent */
  
  --surface-card: #FFFFFF;          /* White floating cards */
  --surface-card-warm: #FEFCF9;    /* Warm cream variant */
  --surface-card-hover: #F9FAF9;   /* Subtle hover state */
  --surface-overlay: rgba(255, 255, 255, 0.85);
  
  /* ═══ Text ═══ */
  --text-primary: #1A1A1E;         /* Cooler editorial near-black (unified 2026-06-01) */
  --text-secondary: #5A6B5E;       /* Sage-tinted gray — publisher names, warm secondary body */
  --text-editorial-body: #6B7280;  /* Cool slate — editorial story-card summary / body */
  --text-tertiary: #8A9B8E;        /* Light sage gray */
  --text-on-image: #FFFFFF;
  --text-on-image-muted: rgba(255, 255, 255, 0.75);
  
  /* ═══ Pastel Accent Palette ═══ */
  --pastel-lavender: #C9B8E8;
  --pastel-mint: #A8D8B9;
  --pastel-peach: #F5C6AA;
  --pastel-sky: #A8C8E8;
  --pastel-rose: #E8B8C8;
  --pastel-lemon: #E8E0A8;
  --pastel-lilac: #D8B8E8;
  
  /* ═══ Functional Colors ═══ */
  --accent-primary: #7C77B9;       /* Brand violet */
  --accent-warm: #D4A574;          /* Warm amber accent */
  --score-high: #6BC68F;           /* Score ≥75 */
  --score-mid: #C9B8E8;            /* Score 50-74 */
  --score-low: #B0B8B2;            /* Score <50 */
  --badge-active: #34C759;         /* Active story liveness badge */
  --credibility-high: #6BC68F;
  --credibility-mixed: #E8D468;
  --credibility-low: #E88868;
  
  /* ═══ Article Type Accents ═══ */
  --type-opinion: #E8A468;
  --type-analysis: #7BA8E8;
  --type-editorial: #B888D8;
  --type-feature: #68C8B8;
  
  /* ═══ Score Donut Colors ═══ */
  --donut-credibility: #6BC68F;
  --donut-importance: #D4A574;
  --donut-freshness: #7BA8E8;
  --donut-interests: #C9B8E8;

  /* ═══ Feed Formula v2: Signal Identity Colors ═══ */
  --signal-credibility: #6BC68F;
  --signal-trending: #FB923C;
  --signal-breadth: #2DD4BF;
  --signal-freshness: #7BA8E8;
  --signal-topic: #A78BFA;
  --signal-favorites: #F472B6;

  /* ═══ Feed Formula v2: Publisher Preference Tints ═══ */
  --pref-favorite: #4BA672;
  --pref-dislike: #D97706;
  --pref-blocked: #DC2626;

  /* ═══ Insights v2: Standout Identity Colors ═══ */
  --insight-topic: #2E9E8F;
  --insight-source: #9B7BD8;
  --insight-perspective: #E89868;

  /* ═══ Feed Formula v2: Section Background Tints ═══ */
  --section-story: #FDE0D2;
  --section-personal: #E8D8E8;
  /* ═══ Narrative Pulse (Mega-Cluster Identity) ═══ */
  --narrative-coral: #C0554F;
  --narrative-indigo: #4A7EC0;
  --narrative-amber: #C0874A;
  --narrative-teal: #4A9E8C;
  --narrative-plum: #8A5EC0;
  --narrative-slate: #5A7A8C;
  --narrative-rose: #C07A8A;
  --narrative-sage: #7A8C5A;
  --narrative-earth: #8C6A4A;
  --narrative-field: #5A8C7A;
  --narrative-violet: #6A5A8C;
  --narrative-ember: #8C5A5A;
  
  /* ═══ Spacing Scale (8pt grid) ═══ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* ═══ Radius Scale ═══ */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  
  /* ═══ Typography ═══ */
  --font-headline: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-greeting: 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* ═══ Shadows ═══ */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hero: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.1);
  
  /* ═══ Transitions ═══ */
  --ease-snappy: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-snappy: 200ms;
  --duration-smooth: 400ms;
  
  /* ═══ Layout ═══ */
  --feed-width: 420px;
  --feed-padding: 20px;
  --card-gap: 16px;
}