/* ==========================================================================
   WHMCS PRO TURKISH THEME — DESIGN SYSTEM TOKENS
   Pure CSS Custom Properties for Brand Presets & Light/Dark Modes
   Benchmark: Turhost, Natro, Güzel Hosting
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE SYSTEM TOKENS (Shared Dimensions, Transitions, Spacing)
   -------------------------------------------------------------------------- */
:root {
  /* Typography Stacks */
  --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --theme-font-heading: 'Plus Jakarta Sans', var(--theme-font-sans);
  --theme-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;

  /* Typographic Scale */
  --theme-text-xs: 0.75rem;     /* 12px */
  --theme-text-sm: 0.84375rem;  /* 13.5px */
  --theme-text-base: 0.9375rem; /* 15px */
  --theme-text-md: 1.0625rem;   /* 17px */
  --theme-text-lg: 1.25rem;     /* 20px */
  --theme-text-xl: 1.375rem;    /* 22px */
  --theme-text-2xl: 1.75rem;    /* 28px */
  --theme-text-3xl: 2rem;       /* 32px */
  --theme-text-4xl: 2.75rem;    /* 44px */

  /* Radii */
  --theme-radius-none: 0px;
  --theme-radius-xs: 4px;
  --theme-radius-sm: 6px;
  --theme-radius-md: 10px;
  --theme-radius-lg: 14px;
  --theme-radius-xl: 18px;
  --theme-radius-2xl: 24px;
  --theme-radius-full: 9999px;

  /* Transitions */
  --theme-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container Widths */
  --theme-container-max: 1280px;
  --theme-container-wide: 1440px;
  --theme-container-pad: 1.5rem;

  /* Status Tokens (Universal) */
  --theme-success: #10B981;
  --theme-success-hover: #059669;
  --theme-success-light: #ECFDF5;
  --theme-warning: #F59E0B;
  --theme-warning-hover: #D97706;
  --theme-warning-light: #FFFBEB;
  --theme-danger: #EF4444;
  --theme-danger-hover: #DC2626;
  --theme-danger-light: #FEF2F2;
  --theme-info: #3B82F6;
  --theme-info-hover: #2563EB;
  --theme-info-light: #EFF6FF;

  /* ------------------------------------------------------------------------
     PRESET 1: TURHOST (Titan Corporate — Default)
     Deep Navy #0F172A, Cobalt #1D4ED8, Amber CTA #F59E0B
     ------------------------------------------------------------------------ */
  --theme-primary: #1D4ED8;
  --theme-primary-hover: #1E40AF;
  --theme-primary-active: #172554;
  --theme-primary-light: #EFF6FF;
  --theme-primary-rgb: 29, 78, 216;

  --theme-secondary: #0F172A;
  --theme-secondary-hover: #1E293B;
  --theme-secondary-light: #334155;
  --theme-secondary-rgb: 15, 23, 42;

  --theme-accent: #F59E0B;
  --theme-accent-hover: #D97706;
  --theme-accent-active: #B45309;
  --theme-accent-light: #FEF3C7;
  --theme-accent-text: #0F172A;
  --theme-btn-accent-text: #0F172A;
  --theme-accent-rgb: 245, 158, 11;

  --theme-bg: #F8FAFC;
  --theme-bg-alt: #F1F5F9;
  --theme-surface: #FFFFFF;
  --theme-surface-hover: #F8FAFC;
  --theme-surface-alt: #F1F5F9;
  --theme-card: #FFFFFF;

  --theme-border: #E2E8F0;
  --theme-border-subtle: #F1F5F9;
  --theme-border-highlight: #3B82F6;

  --theme-text: #0F172A;
  --theme-text-main: #0F172A;
  --theme-text-muted: #64748B;
  --theme-text-subtle: #94A3B8;
  --theme-text-inverse: #FFFFFF;

  --theme-badge-ai-bg: #EEF2FF;
  --theme-badge-ai-text: #4F46E5;
  --theme-badge-sale-bg: #FEF3C7;
  --theme-badge-sale-text: #B45309;
  --theme-badge-popular: #F59E0B;

  --theme-radius-card: 16px;
  --theme-radius: 16px;
  --theme-radius-btn: 9999px;

  --theme-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --theme-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --theme-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --theme-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --theme-shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --theme-shadow-card-hover: 0 20px 30px -10px rgba(15, 23, 42, 0.12), 0 10px 15px -5px rgba(15, 23, 42, 0.06);

  --theme-card-highlight-gradient: linear-gradient(90deg, #1D4ED8, #38BDF8);
  --theme-header-bg: #0F172A;
  --theme-header-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   PRESET 1: TURHOST (Explicit Attribute Selector)
   -------------------------------------------------------------------------- */
[data-theme-preset="turhost"],
body[data-theme-preset="turhost"] {
  --theme-primary: #1D4ED8;
  --theme-primary-hover: #1E40AF;
  --theme-primary-active: #172554;
  --theme-primary-light: #EFF6FF;
  --theme-primary-rgb: 29, 78, 216;

  --theme-secondary: #0F172A;
  --theme-secondary-hover: #1E293B;
  --theme-secondary-light: #334155;
  --theme-secondary-rgb: 15, 23, 42;

  --theme-accent: #F59E0B;
  --theme-accent-hover: #D97706;
  --theme-accent-active: #B45309;
  --theme-accent-light: #FEF3C7;
  --theme-accent-text: #FFFFFF;
  --theme-accent-rgb: 245, 158, 11;

  --theme-bg: #F8FAFC;
  --theme-bg-alt: #F1F5F9;
  --theme-surface: #FFFFFF;
  --theme-surface-hover: #F8FAFC;
  --theme-surface-alt: #F1F5F9;
  --theme-card: #FFFFFF;

  --theme-border: #E2E8F0;
  --theme-border-subtle: #F1F5F9;
  --theme-border-highlight: #3B82F6;

  --theme-text: #0F172A;
  --theme-text-main: #0F172A;
  --theme-text-muted: #64748B;
  --theme-text-subtle: #94A3B8;

  --theme-badge-ai-bg: #EEF2FF;
  --theme-badge-ai-text: #4F46E5;
  --theme-badge-sale-bg: #FEF3C7;
  --theme-badge-sale-text: #B45309;
  --theme-badge-popular: #F59E0B;

  --theme-radius-card: 16px;
  --theme-radius: 16px;
  --theme-radius-btn: 9999px;

  --theme-shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --theme-shadow-card-hover: 0 20px 30px -10px rgba(15, 23, 42, 0.12), 0 10px 15px -5px rgba(15, 23, 42, 0.06);
  --theme-card-highlight-gradient: linear-gradient(90deg, #1D4ED8, #38BDF8);
  --theme-header-bg: #0F172A;
  --theme-header-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   PRESET 2: NATRO (Crimson High-Conversion)
   Dark Indigo #0A192F, Crimson/Coral #FF5722, Emerald #10B981
   -------------------------------------------------------------------------- */
[data-theme-preset="natro"],
body[data-theme-preset="natro"] {
  --theme-primary: #0047BA;
  --theme-primary-hover: #00368C;
  --theme-primary-active: #00225A;
  --theme-primary-light: #EFF6FF;
  --theme-primary-rgb: 0, 71, 186;

  --theme-secondary: #0A192F;
  --theme-secondary-hover: #172A45;
  --theme-secondary-light: #203A60;
  --theme-secondary-rgb: 10, 25, 47;

  --theme-accent: #FF5722;
  --theme-accent-hover: #E64A19;
  --theme-accent-active: #BF360C;
  --theme-accent-light: #FFEDE6;
  --theme-accent-text: #FFFFFF;
  --theme-accent-rgb: 255, 87, 34;

  --theme-bg: #F5F7FA;
  --theme-bg-alt: #EDF2F7;
  --theme-surface: #FFFFFF;
  --theme-surface-hover: #EDF2F7;
  --theme-surface-alt: #E2E8F0;
  --theme-card: #FFFFFF;

  --theme-border: #E2E8F0;
  --theme-border-subtle: #EDF2F7;
  --theme-border-highlight: #FF5722;

  --theme-text: #1E293B;
  --theme-text-main: #1E293B;
  --theme-text-muted: #64748B;
  --theme-text-subtle: #8B949E;

  --theme-badge-ai-bg: #E0E7FF;
  --theme-badge-ai-text: #3730A3;
  --theme-badge-sale-bg: #D1FAE5;
  --theme-badge-sale-text: #064E3B;
  --theme-badge-campaign: #E11D48;
  --theme-badge-popular: #10B981;

  --theme-radius-card: 12px;
  --theme-radius: 12px;
  --theme-radius-btn: 9999px;

  --theme-shadow-card: 0 4px 20px -2px rgba(0, 71, 186, 0.08);
  --theme-shadow-card-hover: 0 12px 24px -4px rgba(255, 87, 34, 0.18);
  --theme-card-highlight-gradient: linear-gradient(90deg, #FF5722, #E11D48);
  --theme-header-bg: #0A192F;
  --theme-header-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   PRESET 3: GÜZEL HOSTING (Trust & Clarity)
   Deep Teal #00838F, Emerald #00A86B, Deep Slate #1E293B
   -------------------------------------------------------------------------- */
[data-theme-preset="guzel"],
body[data-theme-preset="guzel"] {
  --theme-primary: #00838F;
  --theme-primary-hover: #006064;
  --theme-primary-active: #004D40;
  --theme-primary-light: #E0F7FA;
  --theme-primary-rgb: 0, 131, 143;

  --theme-secondary: #1E293B;
  --theme-secondary-hover: #0F172A;
  --theme-secondary-light: #334155;
  --theme-secondary-rgb: 30, 41, 59;

  --theme-accent: #00A86B;
  --theme-accent-hover: #00875A;
  --theme-accent-active: #006644;
  --theme-accent-light: #E8F5E9;
  --theme-accent-text: #FFFFFF;
  --theme-accent-rgb: 0, 168, 107;

  --theme-bg: #F8FAFC;
  --theme-bg-alt: #F1F5F9;
  --theme-surface: #FFFFFF;
  --theme-surface-hover: #F1F5F9;
  --theme-surface-alt: #E2E8F0;
  --theme-card: #FFFFFF;

  --theme-border: #E2E8F0;
  --theme-border-subtle: #F1F5F9;
  --theme-border-highlight: #00A86B;

  --theme-text: #0F172A;
  --theme-text-main: #0F172A;
  --theme-text-muted: #64748B;
  --theme-text-subtle: #94A3B8;

  --theme-badge-ai-bg: #E0F2FE;
  --theme-badge-ai-text: #0369A1;
  --theme-badge-sale-bg: #DCFCE7;
  --theme-badge-sale-text: #166534;
  --theme-badge-cpanel: #FF6C2C;
  --theme-badge-da: #2D9CDB;
  --theme-badge-popular: #00A86B;

  --theme-radius-card: 10px;
  --theme-radius: 10px;
  --theme-radius-btn: 8px;

  --theme-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --theme-shadow-card-hover: 0 8px 20px -2px rgba(0, 168, 107, 0.15);
  --theme-card-highlight-gradient: linear-gradient(90deg, #00838F, #00A86B);
  --theme-header-bg: #00838F;
  --theme-header-text: #FFFFFF;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   Supported via [data-theme="dark"], html.dark, or body.dark
   ========================================================================== */

/* Dark Mode - Turhost Default */
[data-theme="dark"],
html.dark,
body.dark,
[data-theme="dark"][data-theme-preset="turhost"],
html.dark[data-theme-preset="turhost"],
body.dark[data-theme-preset="turhost"] {
  --theme-primary: #3B82F6;
  --theme-primary-hover: #60A5FA;
  --theme-primary-active: #93C5FD;
  --theme-primary-light: rgba(59, 130, 246, 0.15);
  --theme-primary-rgb: 59, 130, 246;

  --theme-secondary: #0B1120;
  --theme-secondary-hover: #131D38;
  --theme-secondary-light: #1E293B;
  --theme-secondary-rgb: 11, 17, 32;

  --theme-accent: #FBBF24;
  --theme-accent-hover: #F59E0B;
  --theme-accent-active: #D97706;
  --theme-accent-light: rgba(251, 191, 36, 0.15);
  --theme-accent-text: #0F172A;
  --theme-btn-accent-text: #0F172A;
  --theme-accent-rgb: 251, 191, 36;

  --theme-bg: #0B132B;
  --theme-bg-alt: #070D1F;
  --theme-surface: #131D38;
  --theme-surface-hover: #1A274A;
  --theme-surface-alt: #1F2E54;
  --theme-card: #131D38;

  --theme-border: #1E293B;
  --theme-border-subtle: #162035;
  --theme-border-highlight: #60A5FA;

  --theme-text: #F8FAFC;
  --theme-text-main: #F8FAFC;
  --theme-text-muted: #94A3B8;
  --theme-text-subtle: #64748B;
  --theme-text-inverse: #0F172A;

  --theme-badge-ai-bg: #312E81;
  --theme-badge-ai-text: #A5B4FC;
  --theme-badge-sale-bg: #78350F;
  --theme-badge-sale-text: #FDE68A;
  --theme-badge-popular: #FBBF24;

  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --theme-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --theme-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
  --theme-shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.35);
  --theme-shadow-card-hover: 0 20px 30px -10px rgba(0, 0, 0, 0.65);

  --theme-card-highlight-gradient: linear-gradient(90deg, #3B82F6, #60A5FA);
  --theme-header-bg: #0B1120;
  --theme-header-text: #F8FAFC;
}

/* Dark Mode - Natro Preset */
[data-theme="dark"][data-theme-preset="natro"],
html.dark[data-theme-preset="natro"],
body.dark[data-theme-preset="natro"] {
  --theme-primary: #3B82F6;
  --theme-primary-hover: #60A5FA;
  --theme-primary-active: #93C5FD;
  --theme-primary-light: rgba(59, 130, 246, 0.15);
  --theme-primary-rgb: 59, 130, 246;

  --theme-secondary: #08101E;
  --theme-secondary-hover: #0F172A;
  --theme-secondary-light: #162035;
  --theme-secondary-rgb: 8, 16, 30;

  --theme-accent: #FF7043;
  --theme-accent-hover: #FF5722;
  --theme-accent-active: #E64A19;
  --theme-accent-light: rgba(255, 112, 67, 0.15);
  --theme-accent-text: #0D1117;
  --theme-btn-accent-text: #0D1117;
  --theme-accent-rgb: 255, 112, 67;

  --theme-bg: #0D1117;
  --theme-bg-alt: #080B10;
  --theme-surface: #161B22;
  --theme-surface-hover: #21262D;
  --theme-surface-alt: #2B313A;
  --theme-card: #161B22;

  --theme-border: #30363D;
  --theme-border-subtle: #21262D;
  --theme-border-highlight: #FF7043;

  --theme-text: #F0F6FC;
  --theme-text-main: #F0F6FC;
  --theme-text-muted: #8B949E;
  --theme-text-subtle: #6E7681;

  --theme-badge-ai-bg: #1E1B4B;
  --theme-badge-ai-text: #C7D2FE;
  --theme-badge-sale-bg: #065F46;
  --theme-badge-sale-text: #A7F3D0;
  --theme-badge-campaign: #BE123C;
  --theme-badge-popular: #10B981;

  --theme-shadow-card: 0 6px 20px -2px rgba(0, 0, 0, 0.45);
  --theme-shadow-card-hover: 0 14px 28px -4px rgba(255, 112, 67, 0.25);
  --theme-card-highlight-gradient: linear-gradient(90deg, #FF7043, #FF5722);
  --theme-header-bg: #08101E;
  --theme-header-text: #F0F6FC;
}

/* Dark Mode - Güzel Hosting Preset */
[data-theme="dark"][data-theme-preset="guzel"],
html.dark[data-theme-preset="guzel"],
body.dark[data-theme-preset="guzel"] {
  --theme-primary: #00ACC1;
  --theme-primary-hover: #26C6DA;
  --theme-primary-active: #80DEEA;
  --theme-primary-light: rgba(0, 172, 193, 0.15);
  --theme-primary-rgb: 0, 172, 193;
  --theme-primary-text: #0A1016;
  --theme-btn-primary-text: #0A1016;

  --theme-secondary: #00251A;
  --theme-secondary-hover: #004D40;
  --theme-secondary-light: #00382E;
  --theme-secondary-rgb: 0, 37, 26;

  --theme-accent: #10B981;
  --theme-accent-hover: #059669;
  --theme-accent-active: #047857;
  --theme-accent-light: rgba(16, 185, 129, 0.15);
  --theme-accent-text: #0A1016;
  --theme-btn-accent-text: #0A1016;
  --theme-accent-rgb: 16, 185, 129;

  --theme-bg: #0A1016;
  --theme-bg-alt: #05080C;
  --theme-surface: #111C24;
  --theme-surface-hover: #182632;
  --theme-surface-alt: #223444;
  --theme-card: #111C24;

  --theme-border: #1E2D3D;
  --theme-border-subtle: #15222E;
  --theme-border-highlight: #10B981;

  --theme-text: #F1F5F9;
  --theme-text-main: #F1F5F9;
  --theme-text-muted: #94A3B8;
  --theme-text-subtle: #64748B;

  --theme-badge-ai-bg: #082F49;
  --theme-badge-ai-text: #7DD3FC;
  --theme-badge-sale-bg: #064E3B;
  --theme-badge-sale-text: #A7F3D0;
  --theme-badge-popular: #10B981;

  --theme-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.4);
  --theme-shadow-card-hover: 0 10px 24px -2px rgba(16, 185, 129, 0.2);
  --theme-card-highlight-gradient: linear-gradient(90deg, #00ACC1, #10B981);
  --theme-header-bg: #00251A;
  --theme-header-text: #F1F5F9;
}