/**
 * Headlines.ai - Design System v1.0 (Light Mode)
 * Palette: Seafoam (#00D9A0) + Blue (#2B8AE8)
 * Fonts: Unbounded (display) + DM Sans (body)
 */

:root {
  /* ==========================================================================
     COLORS - Adjusted for light mode
     ========================================================================== */

  /* PRIMARY - Seafoam Green (Brand Color) */
  --primary: #00D9A0;
  --primary-hover: #00C490;
  --primary-dim: rgba(0,217,160,0.12);
  --primary-strong: #00B888;

  /* Primary Scale */
  --primary-50:  #E6FBF5;
  --primary-100: #B3F4E3;
  --primary-200: #80EDD1;
  --primary-300: #4DE6BF;
  --primary-400: #00D9A0;
  --primary-500: #00C490;
  --primary-600: #00B888;
  --primary-700: #009970;
  --primary-800: #007A58;
  --primary-900: #005B40;

  /* SECONDARY - Blue */
  --secondary: #2B8AE8;
  --secondary-hover: #1A7AD8;
  --secondary-dim: rgba(43,138,232,0.10);

  /* Secondary Scale */
  --secondary-50:  #E6F3FF;
  --secondary-100: #CCE7FF;
  --secondary-200: #99CFFF;
  --secondary-300: #66B7FF;
  --secondary-400: #339FFF;
  --secondary-500: #2B8AE8;
  --secondary-600: #1A7AD8;
  --secondary-700: #1565B8;
  --secondary-800: #104F98;
  --secondary-900: #0B3978;

  /* ==========================================================================
     SEMANTIC COLORS
     ========================================================================== */
  --success: #00D9A0;
  --success-dim: rgba(0,217,160,0.12);
  --success-dark: #00B888;

  --warning: #F5A623;
  --warning-dim: rgba(245,166,35,0.12);
  --warning-dark: #D4890A;

  --error: #E53E3E;
  --error-dim: rgba(229,62,62,0.10);
  --error-dark: #C53030;

  --info: #2B8AE8;
  --info-dim: rgba(43,138,232,0.10);
  --info-dark: #1A7AD8;

  /* ==========================================================================
     BACKGROUNDS - Light Mode
     ========================================================================== */
  --bg: #FFFFFF;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F5;
  --surface: #F8F9FA;
  --elevated: #FFFFFF;
  --overlay: #F1F3F5;

  /* ==========================================================================
     BORDERS
     ========================================================================== */
  --border: #E2E5E9;
  --border-light: #E2E5E9;
  --border-default: #E2E5E9;
  --border-hover: #CED4DA;
  --border-dark: #ADB5BD;
  --border-focus: var(--primary);

  /* ==========================================================================
     TEXT - Dark on light
     ========================================================================== */
  --text-1: #1A1D21;
  --text-2: #4A5568;
  --text-3: #718096;
  --text-4: #A0AEC0;
  --text-inv: #FFFFFF;

  /* Legacy text variables */
  --text-primary: #1A1D21;
  --text-secondary: #4A5568;
  --text-tertiary: #718096;
  --text-disabled: #A0AEC0;
  --text-inverse: #FFFFFF;
  --text-link: var(--primary-strong);
  --text-link-hover: var(--primary-hover);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ==========================================================================
     SPACING
     ========================================================================== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Legacy spacing variables */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==========================================================================
     SHADOWS - More prominent in light mode
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);

  /* Colored shadows */
  --shadow-primary: 0 4px 14px rgba(0,217,160,0.4);
  --shadow-secondary: 0 4px 14px rgba(43,138,232,0.4);
  --shadow-accent: 0 4px 14px rgba(245,166,35,0.4);

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  --ease: 0.15s ease;
  --ease-slow: 0.3s ease;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  --sidebar-width: 260px;
  --header-height: 64px;

  /* ==========================================================================
     GRADIENTS
     ========================================================================== */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  --gradient-primary-soft: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

  /* ==========================================================================
     COMPONENT-SPECIFIC TOKENS
     ========================================================================== */

  /* Buttons */
  --btn-primary-bg: var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  --btn-primary-text: var(--text-inv);

  --btn-secondary-bg: var(--secondary);
  --btn-secondary-bg-hover: var(--secondary-hover);
  --btn-secondary-text: var(--text-inv);

  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--text-2);
  --btn-ghost-border: var(--border);

  /* Cards */
  --card-bg: var(--elevated);
  --card-border: var(--border);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Inputs */
  --input-bg: var(--bg);
  --input-border: var(--border);
  --input-border-focus: var(--primary);
  --input-placeholder: var(--text-4);

  /* Navigation */
  --nav-bg: var(--elevated);
  --nav-border: var(--border);
  --nav-item-hover: var(--surface);
  --nav-item-active: var(--primary-dim);

  /* Badges/Tags */
  --badge-primary-bg: var(--primary);
  --badge-primary-text: var(--text-inv);
  --badge-secondary-bg: var(--secondary);
  --badge-secondary-text: var(--text-inv);
  --badge-default-bg: var(--surface);
  --badge-default-text: var(--text-2);

  /* Activity Circles - Light Mode */
  --activity-l0: #E8F5F0;
  --activity-l1: #C6EAE0;
  --activity-l2: #8DD9C4;
  --activity-l3: #4FC9A8;
  --activity-l4: #20BA92;
  --activity-l5: var(--primary);

  /* Chrome Extension Specific */
  --ext-panel-bg: var(--bg);
  --ext-header-bg: var(--gradient-primary);
  --ext-fab-bg: var(--primary);
  --ext-fab-shadow: var(--shadow-primary);
  --ext-highlight: rgba(0,217,160,0.2);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text colors */
.t-display { font-family: var(--font-display); font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.t-h1 { font-family: var(--font-display); font-size: 48px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.1; }
.t-h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; }
.t-h4 { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3; }
.t-h5 { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.4; text-transform: uppercase; }
.t-body { font-size: 14px; line-height: 1.6; }
.t-sm { font-size: 12px; line-height: 1.6; }
.t-xs { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.t-primary { color: var(--primary-strong); }
.t-secondary { color: var(--secondary); }
.t-muted { color: var(--text-2); }
.t-ghost { color: var(--text-4); }

/* Background colors */
.bg-primary { background-color: var(--primary); }
.bg-primary-soft { background-color: var(--primary-dim); }
.bg-secondary { background-color: var(--secondary); }
.bg-surface { background-color: var(--surface); }

/* Gradients */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-hero { background: var(--gradient-hero); }

/* Borders */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }

/* Shadows */
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-secondary { box-shadow: var(--shadow-secondary); }