/**
 * Aunoo AI Design System
 * Based on Radix UI color scales with pink accent
 */

:root {
  /* ============================================
     BASE COLOR SCALES (Radix UI)
     ============================================ */

  /* Pink Scale (Accent) */
  --colors-pink-1: #fef6fb;
  --colors-pink-2: #fee9f5;
  --colors-pink-3: #fdd8ed;
  --colors-pink-4: #fcc5e3;
  --colors-pink-5: #fcadd7;
  --colors-pink-6: #fa8fc9;
  --colors-pink-7: #f769b7;
  --colors-pink-8: #ec4899;  /* Primary pink */
  --colors-pink-9: #e93d82;
  --colors-pink-10: #d6346c;
  --colors-pink-11: #c42b5c;
  --colors-pink-12: #8b1a42;

  /* Pink Alpha (for overlays) */
  --colors-pink-alpha-1: rgba(236, 72, 153, 0.04);
  --colors-pink-alpha-2: rgba(236, 72, 153, 0.08);
  --colors-pink-alpha-3: rgba(236, 72, 153, 0.12);
  --colors-pink-alpha-4: rgba(236, 72, 153, 0.16);
  --colors-pink-alpha-5: rgba(236, 72, 153, 0.24);
  --colors-pink-alpha-6: rgba(236, 72, 153, 0.32);
  --colors-pink-alpha-7: rgba(236, 72, 153, 0.44);
  --colors-pink-alpha-8: rgba(236, 72, 153, 0.56);
  --colors-pink-alpha-9: rgba(236, 72, 153, 0.68);
  --colors-pink-alpha-10: rgba(236, 72, 153, 0.80);
  --colors-pink-alpha-11: rgba(236, 72, 153, 0.92);
  --colors-pink-alpha-12: rgba(236, 72, 153, 0.96);

  /* Slate Scale (Neutral) */
  --colors-slate-1: #fcfcfd;
  --colors-slate-2: #f8f9fa;
  --colors-slate-3: #f1f3f5;
  --colors-slate-4: #e9ecef;
  --colors-slate-5: #dee2e6;
  --colors-slate-6: #ced4da;
  --colors-slate-7: #adb5bd;
  --colors-slate-8: #868e96;
  --colors-slate-9: #495057;
  --colors-slate-10: #343a40;
  --colors-slate-11: #212529;
  --colors-slate-12: #111827;

  /* Slate Alpha */
  --colors-slate-alpha-1: rgba(0, 0, 0, 0.01);
  --colors-slate-alpha-2: rgba(0, 0, 0, 0.03);
  --colors-slate-alpha-3: rgba(0, 0, 0, 0.06);
  --colors-slate-alpha-4: rgba(0, 0, 0, 0.09);
  --colors-slate-alpha-5: rgba(0, 0, 0, 0.13);
  --colors-slate-alpha-6: rgba(0, 0, 0, 0.19);
  --colors-slate-alpha-7: rgba(0, 0, 0, 0.32);
  --colors-slate-alpha-8: rgba(0, 0, 0, 0.47);
  --colors-slate-alpha-9: rgba(0, 0, 0, 0.71);
  --colors-slate-alpha-10: rgba(0, 0, 0, 0.79);
  --colors-slate-alpha-11: rgba(0, 0, 0, 0.87);
  --colors-slate-alpha-12: rgba(0, 0, 0, 0.93);

  /* Green Scale (Success) */
  --colors-green-1: #f0fdf4;
  --colors-green-2: #dcfce7;
  --colors-green-3: #bbf7d0;
  --colors-green-4: #86efac;
  --colors-green-5: #4ade80;
  --colors-green-6: #22c55e;
  --colors-green-7: #16a34a;
  --colors-green-8: #15803d;
  --colors-green-9: #10b981;  /* Primary green */
  --colors-green-10: #059669;
  --colors-green-11: #047857;
  --colors-green-12: #064e3b;

  /* Green Alpha */
  --colors-green-alpha-1: rgba(16, 185, 129, 0.04);
  --colors-green-alpha-2: rgba(16, 185, 129, 0.08);
  --colors-green-alpha-3: rgba(16, 185, 129, 0.12);
  --colors-green-alpha-4: rgba(16, 185, 129, 0.16);
  --colors-green-alpha-5: rgba(16, 185, 129, 0.24);
  --colors-green-alpha-6: rgba(16, 185, 129, 0.32);
  --colors-green-alpha-7: rgba(16, 185, 129, 0.44);
  --colors-green-alpha-8: rgba(16, 185, 129, 0.56);
  --colors-green-alpha-9: rgba(16, 185, 129, 0.68);
  --colors-green-alpha-10: rgba(16, 185, 129, 0.80);
  --colors-green-alpha-11: rgba(16, 185, 129, 0.92);
  --colors-green-alpha-12: rgba(16, 185, 129, 0.96);

  /* Red Scale (Error) */
  --colors-red-1: #fef2f2;
  --colors-red-2: #fee2e2;
  --colors-red-3: #fecaca;
  --colors-red-4: #fca5a5;
  --colors-red-5: #f87171;
  --colors-red-6: #ef4444;
  --colors-red-7: #dc2626;
  --colors-red-8: #b91c1c;
  --colors-red-9: #dc3545;  /* Primary red */
  --colors-red-10: #991b1b;
  --colors-red-11: #7f1d1d;
  --colors-red-12: #450a0a;

  /* Red Alpha */
  --colors-red-alpha-1: rgba(220, 53, 69, 0.04);
  --colors-red-alpha-2: rgba(220, 53, 69, 0.08);
  --colors-red-alpha-3: rgba(220, 53, 69, 0.12);
  --colors-red-alpha-4: rgba(220, 53, 69, 0.16);
  --colors-red-alpha-5: rgba(220, 53, 69, 0.24);
  --colors-red-alpha-6: rgba(220, 53, 69, 0.32);
  --colors-red-alpha-7: rgba(220, 53, 69, 0.44);
  --colors-red-alpha-8: rgba(220, 53, 69, 0.56);
  --colors-red-alpha-9: rgba(220, 53, 69, 0.68);
  --colors-red-alpha-10: rgba(220, 53, 69, 0.80);
  --colors-red-alpha-11: rgba(220, 53, 69, 0.92);
  --colors-red-alpha-12: rgba(220, 53, 69, 0.96);

  /* Amber Scale (Warning) */
  --colors-amber-1: #fffbeb;
  --colors-amber-2: #fef3c7;
  --colors-amber-3: #fde68a;
  --colors-amber-4: #fcd34d;
  --colors-amber-5: #fbbf24;
  --colors-amber-6: #f59e0b;
  --colors-amber-7: #d97706;
  --colors-amber-8: #b45309;
  --colors-amber-9: #ffc107;  /* Primary amber */
  --colors-amber-10: #92400e;
  --colors-amber-11: #78350f;
  --colors-amber-12: #451a03;

  /* Amber Alpha */
  --colors-amber-alpha-1: rgba(255, 193, 7, 0.04);
  --colors-amber-alpha-2: rgba(255, 193, 7, 0.08);
  --colors-amber-alpha-3: rgba(255, 193, 7, 0.12);
  --colors-amber-alpha-4: rgba(255, 193, 7, 0.16);
  --colors-amber-alpha-5: rgba(255, 193, 7, 0.24);
  --colors-amber-alpha-6: rgba(255, 193, 7, 0.32);
  --colors-amber-alpha-7: rgba(255, 193, 7, 0.44);
  --colors-amber-alpha-8: rgba(255, 193, 7, 0.56);
  --colors-amber-alpha-9: rgba(255, 193, 7, 0.68);
  --colors-amber-alpha-10: rgba(255, 193, 7, 0.80);
  --colors-amber-alpha-11: rgba(255, 193, 7, 0.92);
  --colors-amber-alpha-12: rgba(255, 193, 7, 0.96);

  /* Sky Scale (Info) */
  --colors-sky-1: #f0f9ff;
  --colors-sky-2: #e0f2fe;
  --colors-sky-3: #bae6fd;
  --colors-sky-4: #7dd3fc;
  --colors-sky-5: #38bdf8;
  --colors-sky-6: #0ea5e9;
  --colors-sky-7: #0284c7;
  --colors-sky-8: #0369a1;
  --colors-sky-9: #17a2b8;  /* Primary sky */
  --colors-sky-10: #075985;
  --colors-sky-11: #0c4a6e;
  --colors-sky-12: #082f49;

  /* Sky Alpha */
  --colors-sky-alpha-1: rgba(23, 162, 184, 0.04);
  --colors-sky-alpha-2: rgba(23, 162, 184, 0.08);
  --colors-sky-alpha-3: rgba(23, 162, 184, 0.12);
  --colors-sky-alpha-4: rgba(23, 162, 184, 0.16);
  --colors-sky-alpha-5: rgba(23, 162, 184, 0.24);
  --colors-sky-alpha-6: rgba(23, 162, 184, 0.32);
  --colors-sky-alpha-7: rgba(23, 162, 184, 0.44);
  --colors-sky-alpha-8: rgba(23, 162, 184, 0.56);
  --colors-sky-alpha-9: rgba(23, 162, 184, 0.68);
  --colors-sky-alpha-10: rgba(23, 162, 184, 0.80);
  --colors-sky-alpha-11: rgba(23, 162, 184, 0.92);
  --colors-sky-alpha-12: rgba(23, 162, 184, 0.96);

  /* ============================================
     SEMANTIC COLOR MAPPING
     ============================================ */

  /* Accent Colors (Pink) */
  --colors-accent-1: var(--colors-pink-1);
  --colors-accent-2: var(--colors-pink-2);
  --colors-accent-3: var(--colors-pink-3);
  --colors-accent-4: var(--colors-pink-4);
  --colors-accent-5: var(--colors-pink-5);
  --colors-accent-6: var(--colors-pink-6);
  --colors-accent-7: var(--colors-pink-7);
  --colors-accent-8: var(--colors-pink-8);
  --colors-accent-9: var(--colors-pink-9);
  --colors-accent-10: var(--colors-pink-10);
  --colors-accent-11: var(--colors-pink-11);
  --colors-accent-12: var(--colors-pink-12);

  /* Neutral Colors (Slate) */
  --colors-neutral-1: var(--colors-slate-1);
  --colors-neutral-2: var(--colors-slate-2);
  --colors-neutral-3: var(--colors-slate-3);
  --colors-neutral-4: var(--colors-slate-4);
  --colors-neutral-5: var(--colors-slate-5);
  --colors-neutral-6: var(--colors-slate-6);
  --colors-neutral-7: var(--colors-slate-7);
  --colors-neutral-8: var(--colors-slate-8);
  --colors-neutral-9: var(--colors-slate-9);
  --colors-neutral-10: var(--colors-slate-10);
  --colors-neutral-11: var(--colors-slate-11);
  --colors-neutral-12: var(--colors-slate-12);

  /* Success Colors (Green) */
  --colors-success-1: var(--colors-green-1);
  --colors-success-2: var(--colors-green-2);
  --colors-success-3: var(--colors-green-3);
  --colors-success-4: var(--colors-green-4);
  --colors-success-5: var(--colors-green-5);
  --colors-success-6: var(--colors-green-6);
  --colors-success-7: var(--colors-green-7);
  --colors-success-8: var(--colors-green-8);
  --colors-success-9: var(--colors-green-9);
  --colors-success-10: var(--colors-green-10);
  --colors-success-11: var(--colors-green-11);
  --colors-success-12: var(--colors-green-12);

  /* Error Colors (Red) */
  --colors-error-1: var(--colors-red-1);
  --colors-error-2: var(--colors-red-2);
  --colors-error-3: var(--colors-red-3);
  --colors-error-4: var(--colors-red-4);
  --colors-error-5: var(--colors-red-5);
  --colors-error-6: var(--colors-red-6);
  --colors-error-7: var(--colors-red-7);
  --colors-error-8: var(--colors-red-8);
  --colors-error-9: var(--colors-red-9);
  --colors-error-10: var(--colors-red-10);
  --colors-error-11: var(--colors-red-11);
  --colors-error-12: var(--colors-red-12);

  /* Warning Colors (Amber) */
  --colors-warning-1: var(--colors-amber-1);
  --colors-warning-2: var(--colors-amber-2);
  --colors-warning-3: var(--colors-amber-3);
  --colors-warning-4: var(--colors-amber-4);
  --colors-warning-5: var(--colors-amber-5);
  --colors-warning-6: var(--colors-amber-6);
  --colors-warning-7: var(--colors-amber-7);
  --colors-warning-8: var(--colors-amber-8);
  --colors-warning-9: var(--colors-amber-9);
  --colors-warning-10: var(--colors-amber-10);
  --colors-warning-11: var(--colors-amber-11);
  --colors-warning-12: var(--colors-amber-12);

  /* Info Colors (Sky) */
  --colors-info-1: var(--colors-sky-1);
  --colors-info-2: var(--colors-sky-2);
  --colors-info-3: var(--colors-sky-3);
  --colors-info-4: var(--colors-sky-4);
  --colors-info-5: var(--colors-sky-5);
  --colors-info-6: var(--colors-sky-6);
  --colors-info-7: var(--colors-sky-7);
  --colors-info-8: var(--colors-sky-8);
  --colors-info-9: var(--colors-sky-9);
  --colors-info-10: var(--colors-sky-10);
  --colors-info-11: var(--colors-sky-11);
  --colors-info-12: var(--colors-sky-12);

  /* Default Colors */
  --colors-white: #ffffff;
  --colors-black: #000000;

  /* ============================================
     LEGACY COMPATIBILITY ALIASES
     Mapping old variables to new design system
     ============================================ */

  /* Primary colors map to accent (pink) */
  --primary-color: var(--colors-accent-8);  /* #ec4899 */
  --primary-dark: var(--colors-accent-10);  /* Darker pink */

  /* Secondary colors map to success (green) */
  --secondary-color: var(--colors-success-9);  /* #10b981 */
  --secondary-dark: var(--colors-success-10);

  /* Accent color (cyan) - keeping as is for now */
  --accent-color: #4fc3dc;

  /* Background and text */
  --background-color: var(--colors-neutral-2);  /* #f8f9fa */
  --text-color: var(--colors-neutral-12);  /* #111827 */
  --light-text-color: var(--colors-neutral-9);  /* #495057 */

  /* Border colors */
  --border-color: var(--colors-neutral-5);  /* #dee2e6 */

  /* Semantic colors */
  --success-color: var(--colors-success-9);
  --warning-color: var(--colors-warning-9);
  --danger-color: var(--colors-error-9);
  --info-color: var(--colors-info-9);

  /* Grays */
  --light-gray: var(--colors-neutral-2);  /* #f8f9fa */
  --medium-gray: var(--colors-neutral-4);  /* #e9ecef */
  --dark-gray: var(--colors-neutral-10);  /* #343a40 */

  /* ============================================
     SPACING SCALE
     ============================================ */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-7: 2rem;     /* 32px */
  --spacing-8: 2.5rem;   /* 40px */
  --spacing-9: 3rem;     /* 48px */

  /* Legacy spacing aliases */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-7);
  --spacing-xxl: var(--spacing-9);

  /* ============================================
     RADIUS SCALE
     ============================================ */
  --radius-1: 0.125rem;  /* 2px */
  --radius-2: 0.25rem;   /* 4px */
  --radius-3: 0.375rem;  /* 6px */
  --radius-4: 0.5rem;    /* 8px */
  --radius-5: 0.75rem;   /* 12px */
  --radius-6: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* Legacy alias */
  --border-radius: var(--radius-2);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-code: 'Menlo', 'Monaco', 'Courier New', monospace;

  --font-size-1: 0.75rem;   /* 12px */
  --font-size-2: 0.875rem;  /* 14px */
  --font-size-3: 1rem;      /* 16px */
  --font-size-4: 1.125rem;  /* 18px */
  --font-size-5: 1.25rem;   /* 20px */
  --font-size-6: 1.5rem;    /* 24px */
  --font-size-7: 1.75rem;   /* 28px */
  --font-size-8: 2.25rem;   /* 36px */
  --font-size-9: 3rem;      /* 48px */

  /* Legacy aliases */
  --font-size-base: var(--font-size-3);
  --font-size-small: var(--font-size-2);
  --font-size-large: var(--font-size-4);
  --font-size-xlarge: var(--font-size-6);

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height: 1.5;

  /* ============================================
     LAYOUT
     ============================================ */
  --container-width: 1200px;

  /* Shadow System */
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --box-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-accent: 0 4px 12px rgba(236, 72, 153, 0.3);
  --box-shadow-accent-glow: 0 0 20px rgba(236, 72, 153, 0.5);
  --box-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
  --box-shadow-error: 0 4px 8px rgba(220, 53, 69, 0.2);
  --box-shadow-info: 0 4px 12px rgba(23, 162, 184, 0.3);

  /* ============================================
     MEDIA BIAS & FACTUAL REPORTING COLORS
     ============================================ */

  /* Political Bias Colors */
  --colors-bias-left: #3373CC;           /* Deep blue for left bias */
  --colors-bias-left-center: #6699EE;    /* Light blue for left-center */
  --colors-bias-center: #88CC88;         /* Green for least biased/center */
  --colors-bias-right-center: #FF9966;   /* Light orange for right-center */
  --colors-bias-right: #CC3333;          /* Red for right bias */

  /* Special Bias Categories */
  --colors-bias-science: #9966CC;        /* Purple for pro-science */
  --colors-bias-conspiracy: var(--colors-neutral-8);  /* Dark gray for conspiracy/pseudoscience */
  --colors-bias-questionable: var(--colors-neutral-11);  /* Very dark for questionable */
  --colors-bias-satire: #CCBB33;         /* Gold/yellow for satire */

  /* Factual Reporting Levels */
  --colors-factual-very-high: #006600;   /* Dark green for very high */
  --colors-factual-high: #339933;        /* Medium green for high */
  --colors-factual-mixed: var(--colors-warning-8);  /* Orange/amber for mixed */
  --colors-factual-low: #CC0000;         /* Red for low */
  --colors-factual-very-low: var(--colors-error-10);  /* Dark red for very low */

  /* Additional Alpha Variants for Overlays */
  --colors-accent-alpha-10: rgba(236, 72, 153, 0.1);
  --colors-accent-alpha-20: rgba(236, 72, 153, 0.2);
  --colors-accent-alpha-30: rgba(236, 72, 153, 0.3);
  --colors-accent-alpha-50: rgba(236, 72, 153, 0.5);

  --colors-info-alpha-10: rgba(23, 162, 184, 0.1);
  --colors-info-alpha-20: rgba(23, 162, 184, 0.2);
  --colors-info-alpha-30: rgba(23, 162, 184, 0.3);

  --colors-success-alpha-10: rgba(16, 185, 129, 0.1);
  --colors-success-alpha-20: rgba(16, 185, 129, 0.2);
  --colors-success-alpha-30: rgba(16, 185, 129, 0.3);

  --colors-error-alpha-10: rgba(220, 53, 69, 0.1);
  --colors-error-alpha-20: rgba(220, 53, 69, 0.2);
  --colors-error-alpha-30: rgba(220, 53, 69, 0.3);
}