/* Base tokens shared by both themes */
:root {
  /* Typography */
  --pf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Accent + states */
  --pf-accent: #7C3AED;
  --pf-accent-hover: #6B2BD9;
  --pf-success: #22C55E;
  --pf-warning: #F59E0B;
  --pf-danger: #EF4444;
  --pf-info: #3B82F6;

  /* Radii */
  --pf-radius-sm: 8px;
  --pf-radius-md: 12px;
  --pf-radius-lg: 16px;

  /* Motion */
  --pf-ease: cubic-bezier(.2, .8, .2, 1);
  --pf-fast: 120ms;
  --pf-med: 220ms;
  --pf-slow: 420ms;

  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48px */
  --pf-space-xs: 0.25rem;   /* 4px */
  --pf-space-sm: 0.5rem;    /* 8px */
  --pf-space-3: 0.75rem;    /* 12px - fills gap between sm and md */
  --pf-space-md: 1rem;      /* 16px */
  --pf-space-lg: 1.5rem;    /* 24px */
  --pf-space-xl: 2rem;      /* 32px */
  --pf-space-2xl: 3rem;     /* 48px */

  /* Typography scale */
  --pf-text-xs: 0.75rem;
  --pf-text-sm: 0.875rem;
  --pf-text-base: 1rem;
  --pf-text-lg: 1.125rem;
  --pf-text-xl: 1.25rem;
  --pf-text-2xl: 1.5rem;
  --pf-text-3xl: 1.875rem;
  --pf-text-4xl: 2.25rem;

  /* Line heights */
  --pf-leading-tight: 1.25;
  --pf-leading-normal: 1.5;
  --pf-leading-relaxed: 1.625;

  /* Font weights */
  --pf-font-normal: 400;
  --pf-font-medium: 500;
  --pf-font-semibold: 600;
  --pf-font-bold: 700;
  --pf-font-extrabold: 800;
}

/* ===== TRUE LIGHT (DEFAULT) ===== */
:root,
:root.theme-light {
  /* Backgrounds */
  --pf-color-bg: #FFFFFF;
  --pf-color-surface: #F7F8FB;
  --pf-color-elev-1: #FFFFFF;
  --pf-color-elev-2: #F1F3F9;

  /* Text colors */
  --pf-color-text: #0E1220;
  --pf-color-text-muted: #475069;
  --pf-color-text-subtle: #6B7280;

  /* Borders */
  --pf-border: #E4E7EE;
  --pf-border-strong: #D5D9E4;
  --pf-border-subtle: #F1F3F9;

  /* Interactive states */
  --pf-color-hover: #F5F7FA;
  --pf-color-active: #E8ECF2;

  /* Focus and accessibility */
  --pf-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

  /* Shadows */
  --pf-shadow-card: 0 10px 30px rgba(17, 23, 41, 0.06);
  --pf-shadow-hover: 0 16px 40px rgba(17, 23, 41, 0.10);
  --pf-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.22);
  --pf-shadow-subtle: 0 1px 3px rgba(17, 23, 41, 0.04);

  /* Overlay backgrounds */
  --pf-overlay-bg: rgba(17, 23, 41, 0.8);
  --pf-overlay-bg-light: rgba(17, 23, 41, 0.5);

  /* Gradient colors */
  --pf-gradient-start: #ff6a00;
  --pf-gradient-end: #ee0979;
  --pf-gradient-primary: linear-gradient(90deg, var(--pf-gradient-start) 0%, var(--pf-gradient-end) 100%);
  --pf-gradient-subtle: linear-gradient(135deg, #f7f8fa 60%, #f3f4f7 100%);

  /* Semantic color variants for light theme */
  --pf-success-bg: #DCFCE7;
  --pf-success-text: #166534;
  --pf-warning-bg: #FEF3C7;
  --pf-warning-text: #92400E;
  --pf-danger-bg: #FEE2E2;
  --pf-danger-text: #991B1B;
  --pf-info-bg: #EFF6FF;
  --pf-info-text: #1E40AF;
}

/* ===== DARK ===== */
:root.theme-dark {
  /* Backgrounds */
  --pf-color-bg: #0F1115;
  --pf-color-surface: #151821;
  --pf-color-elev-1: #1A1F2B;
  --pf-color-elev-2: #212838;

  /* Text colors */
  --pf-color-text: #E6E8EF;
  --pf-color-text-muted: #AEB3C2;
  --pf-color-text-subtle: #9CA3AF;

  /* Borders */
  --pf-border: #2A3142;
  --pf-border-strong: #3A435A;
  --pf-border-subtle: #1F2937;

  /* Interactive states */
  --pf-color-hover: #1F2937;
  --pf-color-active: #374151;

  /* Override accent color for better contrast in dark mode */
  --pf-accent: #A78BFA;
  --pf-accent-hover: #8B5CF6;

  /* Darker accent for buttons to ensure white text contrast */
  --pf-accent-button: #7C3AED;
  --pf-accent-button-hover: #6D28D9;

  /* Focus and accessibility */
  --pf-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.35);

  /* Shadows */
  --pf-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25);
  --pf-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.30);
  --pf-shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.35);
  --pf-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.12);

  /* Overlay backgrounds for dark theme */
  --pf-overlay-bg: rgba(0, 0, 0, 0.8);
  --pf-overlay-bg-light: rgba(0, 0, 0, 0.6);

  /* Gradient colors - keep same for dark theme */
  --pf-gradient-start: #ff6a00;
  --pf-gradient-end: #ee0979;
  --pf-gradient-primary: linear-gradient(90deg, var(--pf-gradient-start) 0%, var(--pf-gradient-end) 100%);
  --pf-gradient-subtle: linear-gradient(135deg, #2A3142 60%, #212838 100%);

  /* Semantic color variants for dark theme */
  --pf-success-bg: rgba(34, 197, 94, 0.15);
  --pf-success-text: #4ADE80;
  --pf-warning-bg: rgba(245, 158, 11, 0.15);
  --pf-warning-text: #FBBF24;
  --pf-danger-bg: rgba(239, 68, 68, 0.15);
  --pf-danger-text: #F87171;
  --pf-info-bg: rgba(59, 130, 246, 0.15);
  --pf-info-text: #60A5FA;
}

/* ===== AUTO THEME (follows system preference) ===== */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    /* Copy dark theme tokens */
    --pf-color-bg: #0F1115;
    --pf-color-surface: #151821;
    --pf-color-elev-1: #1A1F2B;
    --pf-color-elev-2: #212838;

    --pf-color-text: #E6E8EF;
    --pf-color-text-muted: #AEB3C2;
    --pf-color-text-subtle: #9CA3AF;

    --pf-border: #2A3142;
    --pf-border-strong: #3A435A;
    --pf-border-subtle: #1F2937;

    --pf-color-hover: #1F2937;
    --pf-color-active: #374151;

    /* Override accent color for better contrast in dark mode */
    --pf-accent: #A78BFA;
    --pf-accent-hover: #8B5CF6;

    /* Darker accent for buttons to ensure white text contrast */
    --pf-accent-button: #7C3AED;
    --pf-accent-button-hover: #6D28D9;

    --pf-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.35);

    --pf-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25);
    --pf-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.30);
    --pf-shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.35);
    --pf-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.12);

    --pf-overlay-bg: rgba(0, 0, 0, 0.8);
    --pf-overlay-bg-light: rgba(0, 0, 0, 0.6);

    --pf-success-bg: rgba(34, 197, 94, 0.15);
    --pf-success-text: #4ADE80;
    --pf-warning-bg: rgba(245, 158, 11, 0.15);
    --pf-warning-text: #FBBF24;
    --pf-danger-bg: rgba(239, 68, 68, 0.15);
    --pf-danger-text: #F87171;
    --pf-info-bg: rgba(59, 130, 246, 0.15);
    --pf-info-text: #60A5FA;
  }
}

@media (prefers-color-scheme: light) {
  :root.theme-auto {
    /* Copy light theme tokens (default) */
    --pf-color-bg: #FFFFFF;
    --pf-color-surface: #F7F8FB;
    --pf-color-elev-1: #FFFFFF;
    --pf-color-elev-2: #F1F3F9;

    --pf-color-text: #0E1220;
    --pf-color-text-muted: #475069;
    --pf-color-text-subtle: #6B7280;

    --pf-border: #E4E7EE;
    --pf-border-strong: #D5D9E4;
    --pf-border-subtle: #F1F3F9;

    --pf-color-hover: #F5F7FA;
    --pf-color-active: #E8ECF2;

    --pf-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

    --pf-shadow-card: 0 10px 30px rgba(17, 23, 41, 0.06);
    --pf-shadow-hover: 0 16px 40px rgba(17, 23, 41, 0.10);
    --pf-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.22);
    --pf-shadow-subtle: 0 1px 3px rgba(17, 23, 41, 0.04);

    --pf-overlay-bg: rgba(17, 23, 41, 0.8);
    --pf-overlay-bg-light: rgba(17, 23, 41, 0.5);

    --pf-success-bg: #DCFCE7;
    --pf-success-text: #166534;
    --pf-warning-bg: #FEF3C7;
    --pf-warning-text: #92400E;
    --pf-danger-bg: #FEE2E2;
    --pf-danger-text: #991B1B;
    --pf-info-bg: #EFF6FF;
    --pf-info-text: #1E40AF;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pf-fast: 0ms;
    --pf-med: 0ms;
    --pf-slow: 0ms;
    --pf-ease: linear;
  }
}