/* Import Persian/Arabic fonts from Google Fonts */

/* Updated color scheme for medical questionnaire with emerald green theme */
:root {
  --background: oklch(0.98 0.01 160); /* #fafffe - Very light mint background */
  --foreground: oklch(0.15 0.02 160); /* #0f2419 - Dark forest green text */
  --card: oklch(1 0 0); /* #ffffff - Pure white cards */
  --card-foreground: oklch(0.15 0.02 160); /* #0f2419 - Dark text on cards */
  --popover: oklch(1 0 0); /* #ffffff - White popovers */
  --popover-foreground: oklch(0.15 0.02 160); /* #0f2419 - Dark text in popovers */
  --primary: oklch(0.45 0.15 160); /* #059669 - Emerald green primary */
  --primary-foreground: oklch(1 0 0); /* #ffffff - White text on primary */
  --secondary: oklch(0.92 0.03 160); /* #ecfdf5 - Light mint secondary */
  --secondary-foreground: oklch(0.25 0.08 160); /* #064e3b - Dark green text */
  --muted: oklch(0.96 0.02 160); /* #f0fdf4 - Very light green muted */
  --muted-foreground: oklch(0.55 0.05 160); /* #6b7280 - Muted gray-green text */
  --accent: oklch(0.65 0.12 160); /* #10b981 - Bright emerald accent */
  --accent-foreground: oklch(1 0 0); /* #ffffff - White text on accent */
  --destructive: oklch(0.577 0.245 27.325); /* Red for errors */
  --destructive-foreground: oklch(1 0 0); /* White text on destructive */
  --border: oklch(0.88 0.02 160); /* #d1fae5 - Light green borders */
  --input: oklch(1 0 0); /* #ffffff - White inputs */
  --ring: oklch(0.45 0.15 160 / 0.3); /* Emerald focus ring */
  --chart-1: oklch(0.45 0.15 160); /* Emerald */
  --chart-2: oklch(0.65 0.12 160); /* Light emerald */
  --chart-3: oklch(0.35 0.18 160); /* Dark emerald */
  --chart-4: oklch(0.75 0.08 160); /* Very light emerald */
  --chart-5: oklch(0.25 0.2 160); /* Very dark emerald */
  --radius: 0.75rem; /* Medical-appropriate radius */
  --sidebar: oklch(0.98 0.01 160); /* Light mint sidebar */
  --sidebar-foreground: oklch(0.15 0.02 160); /* Dark text */
  --sidebar-primary: oklch(0.45 0.15 160); /* Emerald primary */
  --sidebar-primary-foreground: oklch(1 0 0); /* White text */
  --sidebar-accent: oklch(0.65 0.12 160); /* Bright emerald accent */
  --sidebar-accent-foreground: oklch(1 0 0); /* White text */
  --sidebar-border: oklch(0.88 0.02 160); /* Light green borders */
  --sidebar-ring: oklch(0.45 0.15 160 / 0.3); /* Emerald focus ring */
}

.dark {
  --background: oklch(0.08 0.02 160); /* #0a1f12 - Very dark green background */
  --foreground: oklch(0.95 0.01 160); /* #f0fdf4 - Light mint text */
  --card: oklch(0.12 0.03 160); /* #1a2e23 - Dark green cards */
  --card-foreground: oklch(0.95 0.01 160); /* Light text on cards */
  --popover: oklch(0.12 0.03 160); /* Dark green popovers */
  --popover-foreground: oklch(0.95 0.01 160); /* Light text in popovers */
  --primary: oklch(0.65 0.12 160); /* Bright emerald primary */
  --primary-foreground: oklch(0.08 0.02 160); /* Dark text on primary */
  --secondary: oklch(0.15 0.05 160); /* Dark mint secondary */
  --secondary-foreground: oklch(0.95 0.01 160); /* Light text */
  --muted: oklch(0.15 0.05 160); /* Dark green muted */
  --muted-foreground: oklch(0.65 0.03 160); /* Muted light green text */
  --accent: oklch(0.55 0.15 160); /* Medium emerald accent */
  --accent-foreground: oklch(0.08 0.02 160); /* Dark text on accent */
  --destructive: oklch(0.55 0.2 25); /* Bright red for errors */
  --destructive-foreground: oklch(0.95 0.01 160); /* Light text */
  --border: oklch(0.2 0.05 160); /* Dark green borders */
  --input: oklch(0.15 0.05 160); /* Dark green inputs */
  --ring: oklch(0.65 0.12 160 / 0.4); /* Bright emerald focus ring */
  --chart-1: oklch(0.65 0.12 160); /* Bright emerald */
  --chart-2: oklch(0.55 0.15 160); /* Medium emerald */
  --chart-3: oklch(0.75 0.08 160); /* Light emerald */
  --chart-4: oklch(0.45 0.18 160); /* Dark emerald */
  --chart-5: oklch(0.35 0.2 160); /* Very dark emerald */
  --sidebar: oklch(0.1 0.03 160); /* Dark green sidebar */
  --sidebar-foreground: oklch(0.95 0.01 160); /* Light text */
  --sidebar-primary: oklch(0.65 0.12 160); /* Bright emerald */
  --sidebar-primary-foreground: oklch(0.08 0.02 160); /* Dark text */
  --sidebar-accent: oklch(0.55 0.15 160); /* Medium emerald */
  --sidebar-accent-foreground: oklch(0.95 0.01 160); /* Light text */
  --sidebar-border: oklch(0.2 0.05 160); /* Dark borders */
  --sidebar-ring: oklch(0.65 0.12 160 / 0.4); /* Focus ring */
}

/* Updated theme inline with new color variables */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Added Persian font family configuration */
  --font-sans: "Aria";
  --font-serif: "Aria";
  --font-mono: "Aria";
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  /* Enhanced body styles with RTL support and Persian typography */
  body {
    @apply bg-background text-foreground font-sans;
    direction: rtl;
    text-align: right;
    line-height: 1.7;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  /* RTL-specific typography and layout adjustments */
  html {
    direction: rtl;
  }

  /* Persian text optimization */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-sans;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  p,
  span,
  div {
    @apply font-sans;
    line-height: 1.7;
  }

  /* Medical questionnaire specific styles */
  .medical-card {
    @apply bg-card border border-border rounded-lg shadow-sm;
    transition: all 0.2s ease-in-out;
  }

  .medical-card:hover {
    @apply shadow-md border-primary/20;
  }

  .question-option {
    @apply bg-secondary/50 border border-border rounded-md p-4 cursor-pointer transition-all duration-200;
  }

  .question-option:hover {
    @apply bg-secondary border-primary/30 shadow-sm;
  }

  .question-option.selected {
    @apply bg-primary text-primary-foreground border-primary shadow-md;
  }

  .progress-bar {
    @apply bg-secondary rounded-full overflow-hidden;
  }

  .progress-fill {
    @apply bg-primary h-full transition-all duration-300 ease-out;
  }

  /* Button styles for medical interface */
  .btn-primary {
    @apply bg-primary text-primary-foreground px-6 py-3 rounded-lg font-medium transition-all duration-200 hover:bg-primary/90 focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground px-6 py-3 rounded-lg font-medium transition-all duration-200 hover:bg-secondary/80 focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }

  /* Form input styles */
  .form-input {
    @apply bg-input border border-border rounded-md px-4 py-3 text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:border-primary transition-all duration-200;
  }

  /* Result display styles */
  .result-card {
    @apply bg-gradient-to-br from-primary/5 to-accent/5 border border-primary/20 rounded-xl p-6 shadow-lg;
  }

  .temperament-hot {
    @apply bg-gradient-to-br from-red-50 to-orange-50 border-red-200 text-red-800;
  }

  .temperament-cold {
    @apply bg-gradient-to-br from-blue-50 to-cyan-50 border-blue-200 text-blue-800;
  }

  .temperament-wet {
    @apply bg-gradient-to-br from-green-50 to-emerald-50 border-green-200 text-green-800;
  }

  .temperament-dry {
    @apply bg-gradient-to-br from-yellow-50 to-amber-50 border-yellow-200 text-yellow-800;
  }

  .temperament-balanced {
    @apply bg-gradient-to-br from-primary/5 to-accent/5 border-primary/20 text-primary;
  }

  /* Animation classes */
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  .slide-up {
    animation: slideUp 0.4s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Print styles for results */
  @media print {
    body {
      direction: rtl;
      font-size: 12pt;
      line-height: 1.5;
    }

    .no-print {
      display: none !important;
    }

    .medical-card,
    .result-card {
      break-inside: avoid;
      box-shadow: none;
      border: 1px solid #ccc;
    }
  }

  /* Responsive adjustments for mobile */
  @media (max-width: 768px) {
    body {
      font-size: 14px;
    }

    .medical-card {
      @apply mx-2;
    }

    .question-option {
      @apply p-3 text-sm;
    }

    .btn-primary,
    .btn-secondary {
      @apply px-4 py-2 text-sm;
    }
  }
}