/* ═══════════════════════════════════════════════════════════
   SEO Audit Pro — Design Tokens
   Extracted 1:1 from Fila Template (EnvyTheme) style.css
   Font: Outfit | Colors: Fila exact values
   ═══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root {
  /* ── Fila Typography (Outfit) ── */
  --ff: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ff-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ── Fila Border Radius (exact) ── */
  --radius-xs: 0.25rem;    /* 4px - border-radius-sm */
  --radius-sm: 0.375rem;   /* 6px - border-radius */
  --radius: 0.375rem;      /* 6px - border-radius */
  --radius-lg: 0.5rem;     /* 8px - border-radius-lg */
  --radius-xl: 1rem;       /* 16px - border-radius-xl */
  --radius-pill: 50rem;    /* pill */

  /* ── Fila 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;

  /* ── Sidebar ── */
  --sidebar-w: 260px;

  /* ── Fila Transitions ── */
  --ease: ease;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration: 500ms;
  --duration-slow: 500ms;
}

/* ═══ LIGHT THEME — Fila exact values ═══ */
:root, [data-theme="light"] {
  /* Fila body/bg */
  --bg: #eff3f9;
  --bg-alt: #f4f6fc;
  --surface: #ffffff;
  --surface-hover: #f8f9fa;
  --border: rgba(0, 0, 0, 0.175);
  --border-light: #eeeeee;
  --border-solid: #e7e2e2;
  --border-dashed: #e0e0e0;

  /* Fila text colors */
  --text: #475569;
  --text-secondary: #697689;
  --text-muted: #919aa3;
  --heading-color: #475569;

  /* ── Fila Primary: #0f79f3 ── */
  --primary: #0f79f3;
  --primary-hover: #0c61c2;
  --primary-bg: #f1f2fd;
  --primary-rgb: 15, 121, 243;
  --primary-gradient: linear-gradient(135deg, #0f79f3, #796df6);

  /* ── Fila Secondary: #475569 ── */
  --secondary: #475569;
  --secondary-bg: rgba(71, 85, 105, 0.08);

  /* ── Fila Success: #2ed47e ── */
  --success: #2ed47e;
  --success-bg: #eafbf2;
  --success-rgb: 46, 212, 126;

  /* ── Fila Warning: #ffb264 ── */
  --warning: #ffb264;
  --warning-bg: rgba(255, 178, 100, 0.12);
  --warning-rgb: 255, 178, 100;

  /* ── Fila Danger: #e74c3c ── */
  --danger: #e74c3c;
  --danger-bg: #fdebf3;
  --danger-rgb: 231, 76, 60;

  /* ── Fila Info: #00cae3 ── */
  --info: #00cae3;
  --info-bg: rgba(0, 202, 227, 0.08);
  --info-rgb: 0, 202, 227;

  /* ── Fila extended palette ── */
  --orange: #fd7e14;
  --orange-bg: rgba(253, 126, 20, 0.08);
  --purple: #796df6;
  --purple-bg: rgba(121, 109, 246, 0.08);

  /* ── Fila Sidebar (white in light mode) ── */
  --sidebar-bg: #ffffff;
  --sidebar-text: #475569;
  --sidebar-text-muted: #919aa3;
  --sidebar-active-bg: #ECF0FF;
  --sidebar-active: #0f79f3;
  --sidebar-hover-bg: #ECF0FF;
  --sidebar-border: #eff3f9;
  --sidebar-brand: #475569;

  /* ── Fila Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --shadow-primary: 0 4px 16px rgba(15, 121, 243, 0.25);

  /* ── Fila Table ── */
  --table-head-bg: #e7effd;
  --table-border-dashed: 1px dashed #e0e0e0;

  color-scheme: light;
}

/* ═══ DARK THEME — Fila exact [data-theme=dark] ═══ */
[data-theme="dark"] {
  --bg: #212529;
  --bg-alt: #1b232d;
  --surface: #1b232d;
  --surface-hover: #2c343e;
  --border: rgba(255, 255, 255, 0.09);
  --border-light: rgba(255, 255, 255, 0.05);
  --border-solid: #1b232d;
  --border-dashed: rgba(255, 255, 255, 0.09);

  --text: #dee2e6;
  --text-secondary: rgba(255, 255, 255, 0.5);
  --text-muted: rgba(222, 226, 230, 0.5);
  --heading-color: #ffffff;

  --primary: #0f79f3;
  --primary-hover: #138bfd;
  --primary-bg: rgba(15, 121, 243, 0.12);
  --primary-rgb: 15, 121, 243;
  --primary-gradient: linear-gradient(135deg, #0f79f3, #796df6);

  --secondary: #475569;
  --secondary-bg: rgba(71, 85, 105, 0.15);

  --success: #2ed47e;
  --success-bg: rgba(46, 212, 126, 0.12);
  --success-rgb: 46, 212, 126;

  --warning: #ffb264;
  --warning-bg: rgba(255, 178, 100, 0.12);
  --warning-rgb: 255, 178, 100;

  --danger: #e74c3c;
  --danger-bg: rgba(231, 76, 60, 0.12);
  --danger-rgb: 231, 76, 60;

  --info: #00cae3;
  --info-bg: rgba(0, 202, 227, 0.12);
  --info-rgb: 0, 202, 227;

  --orange: #fd7e14;
  --orange-bg: rgba(253, 126, 20, 0.12);
  --purple: #796df6;
  --purple-bg: rgba(121, 109, 246, 0.12);

  /* Fila dark sidebar */
  --sidebar-bg: #1b232d;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.5);
  --sidebar-active-bg: #2c343e;
  --sidebar-active: #0f79f3;
  --sidebar-hover-bg: #2c343e;
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --sidebar-brand: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 4px 16px rgba(15, 121, 243, 0.2);

  --table-head-bg: #293542;
  --table-border-dashed: 1px dashed rgba(255, 255, 255, 0.09);

  color-scheme: dark;
}