index.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Media Intel Design System - Klein Blue Theme */

@layer base {
  :root {
    /* Core palette - Light mode (clean, professional) */
    --background: 30 10% 97%;
    --foreground: 0 0% 10%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;

    /* Primary - Deep slate */
    --primary: 220 14% 18%;
    --primary-foreground: 0 0% 98%;

    /* Secondary - Subtle gray */
    --secondary: 220 13% 95%;
    --secondary-foreground: 220 14% 18%;

    /* Muted */
    --muted: 220 13% 95%;
    --muted-foreground: 220 9% 46%;

    /* Accent - International Klein Blue */
    --accent: 223 100% 33%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 223 100% 28%;
    --accent-light: 223 100% 95%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Success */
    --success: 160 84% 39%;
    --success-foreground: 0 0% 100%;
    --success-light: 160 76% 94%;

    /* Warning */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 10%;
    --warning-light: 48 96% 89%;

    /* Info */
    --info: 199 89% 48%;
    --info-foreground: 0 0% 100%;
    --info-light: 199 89% 94%;

    /* Borders and inputs */
    --border: 220 13% 89%;
    --input: 220 13% 89%;
    --ring: 223 100% 33%;

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: 220 14% 18%;
    --sidebar-foreground: 220 13% 82%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 220 14% 18%;
    --sidebar-accent: 223 100% 33%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 13% 26%;
    --sidebar-ring: 223 100% 33%;

    /* Chart colors */
    --chart-1: 223 100% 33%;
    --chart-2: 220 70% 50%;
    --chart-3: 160 84% 39%;
    --chart-4: 38 92% 50%;
    --chart-5: 280 65% 60%;

    /* Fonts */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-farsi: 'Vazirmatn', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
    --shadow-glow: 0 0 20px hsl(223 100% 33% / 0.15);

    /* Political leaning colors */
    --leaning-state: 220 9% 46%;
    --leaning-principlist: 223 100% 33%;
    --leaning-reformist: 220 70% 50%;
    --leaning-moderate: 280 65% 60%;
    --leaning-economic: 160 84% 39%;
  }

  .dark {
    --background: 220 16% 8%;
    --foreground: 220 13% 91%;

    --card: 220 16% 12%;
    --card-foreground: 220 13% 91%;

    --popover: 220 16% 14%;
    --popover-foreground: 220 13% 91%;

    --primary: 220 13% 91%;
    --primary-foreground: 220 16% 8%;

    --secondary: 220 14% 18%;
    --secondary-foreground: 220 13% 82%;

    --muted: 220 14% 18%;
    --muted-foreground: 220 9% 60%;

    --accent: 223 100% 45%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 223 100% 55%;
    --accent-light: 223 100% 20%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --success: 160 84% 45%;
    --success-foreground: 0 0% 100%;
    --success-light: 160 50% 15%;

    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 10%;
    --warning-light: 38 50% 15%;

    --info: 199 89% 55%;
    --info-foreground: 0 0% 100%;
    --info-light: 199 50% 15%;

    --border: 220 14% 22%;
    --input: 220 14% 22%;
    --ring: 223 100% 45%;

    --sidebar-background: 220 16% 6%;
    --sidebar-foreground: 220 13% 72%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 220 16% 8%;
    --sidebar-accent: 223 100% 45%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 14% 18%;
    --sidebar-ring: 223 100% 45%;

    --chart-1: 223 100% 45%;
    --chart-2: 220 70% 55%;
    --chart-3: 160 84% 45%;
    --chart-4: 38 92% 55%;
    --chart-5: 280 65% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted/30;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full hover:bg-muted-foreground/30;
  }
}

@layer utilities {
  .font-farsi {
    font-family: var(--font-farsi);
  }

  /* Legacy utilities for existing components */
  .bg-surface-secondary {
    @apply bg-muted;
  }

  .text-accent {
    color: hsl(var(--accent));
  }

  .bg-accent {
    background-color: hsl(var(--accent));
  }

  .bg-accent-light {
    background-color: hsl(var(--accent-light));
  }

  .border-accent {
    border-color: hsl(var(--accent));
  }

  .hover\:bg-accent-hover:hover {
    background-color: hsl(var(--accent-hover));
  }

  .bg-success {
    background-color: hsl(var(--success));
  }

  .bg-success-light {
    background-color: hsl(var(--success-light));
  }

  .text-success {
    color: hsl(var(--success));
  }

  .bg-warning-light {
    background-color: hsl(var(--warning-light));
  }

  .text-warning {
    color: hsl(var(--warning));
  }

  .bg-info-light {
    background-color: hsl(var(--info-light));
  }

  .text-info {
    color: hsl(var(--info));
  }

  /* Shadow utilities */
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  /* Glass effect */
  .glass {
    @apply bg-card/80 backdrop-blur-sm;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent;
  }

  /* Leaning badge utilities */
  .badge-state {
    @apply bg-muted text-muted-foreground border-border;
  }

  .badge-principlist {
    background-color: hsl(var(--accent-light));
    color: hsl(var(--accent));
    border-color: hsl(var(--accent) / 0.3);
  }

  .badge-reformist {
    @apply bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
  }

  .badge-moderate {
    @apply bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800;
  }

  .badge-economic {
    background-color: hsl(var(--success-light));
    color: hsl(var(--success));
    border-color: hsl(var(--success) / 0.3);
  }

  /* Animate utilities */
  .animate-in {
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
  }

  @keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}