/* ==========================================================================
   NanoFlow Core — Global Design Tokens (CSS Custom Properties)
   ==========================================================================
   This file defines the centralized color system for all NanoFlow widgets.
   It supports both light and dark themes via the `.dark` class.
   
   Naming Convention:
     --nf-{group}-{property}-{modifier}
   
   Groups:
     color  : Core brand colors (primary, accent, status)
     bg     : Background colors
     surface: Surface/card colors
     text   : Text colors
     border : Border colors
     gradient: Gradient definitions
   
   WCAG 2.1 AA Compliance:
   - Normal text (< 18px / < 14px bold): contrast ratio >= 4.5:1
   - Large text (>= 18px / >= 14px bold): contrast ratio >= 3:1
   ========================================================================== */

:root {
  /* ========================================================================
     THEME-INDEPENDENT CORE COLORS
     ======================================================================== */

  /* --- Primary Accent — Amber (#D97706) --- */
  /* Used for: CTAs, links, active states, icons in Web Tasarim widgets */
  --nf-color-primary: #D97706;
  --nf-color-primary-hover: #B45309;
  --nf-color-primary-light: #FEF3D7;
  --nf-color-primary-medium: #FCE8C3;
  --nf-color-primary-bg: rgba(217, 119, 6, 0.1);
  --nf-color-primary-border: rgba(217, 119, 6, 0.3);
  --nf-color-primary-shadow: rgba(217, 119, 6, 0.3);
  --nf-color-primary-glow: rgba(217, 119, 6, 0.16);

  /* --- Primary Blue (#3b82f6) --- */
  /* Used for: Primary buttons, links in Anasayfa/Solutions dark mode */
  --nf-color-primary-blue: #3b82f6;
  --nf-color-primary-blue-hover: #2563eb;
  --nf-color-primary-blue-bg: rgba(37, 99, 235, 0.15);
  --nf-color-primary-blue-shadow: rgba(37, 99, 235, 0.25);
  --nf-color-primary-blue-shadow-hover: rgba(37, 99, 235, 0.4);
  --nf-color-primary-blue-glow: rgba(30, 90, 255, 0.15);

  /* --- Secondary Accents --- */
  --nf-accent-cyan: #06b6d4;
  --nf-accent-purple: #a855f7;
  --nf-accent-purple-bg: rgba(147, 51, 234, 0.1);
  --nf-accent-pink: #ec4899;
  --nf-accent-amber: #f59e0b;
  --nf-accent-amber-bg: rgba(245, 158, 11, 0.1);
  --nf-accent-amber-border: rgba(245, 158, 11, 0.3);
  --nf-accent-orange: #ea580c;

  /* --- Status Colors --- */
  --nf-color-success: #22c55e;
  --nf-color-success-light: #4ade80;
  --nf-color-success-bg: rgba(34, 197, 94, 0.1);
  --nf-color-warning: #f59e0b;
  --nf-color-error: #ef4444;
  --nf-color-star: #fbbf24;
  --nf-color-cream: #F8F6F1;

  /* ========================================================================
     LIGHT THEME (default)
     ======================================================================== */

  /* --- Backgrounds --- */
  --nf-bg-primary: #F8F6F1;
  --nf-bg-alt: #FFFAF2;
  --nf-bg-warm: #FBFAF4;
  --nf-bg-muted: #F4F1E8;
  --nf-bg-amber-subtle: #FEF7EC;

  /* --- Surfaces (cards, containers) --- */
  --nf-surface: #FFFFFF;
  --nf-surface-amber: #FEF3D7;
  --nf-surface-amber-medium: #FCE8C3;

  /* --- Text Colors --- */
  --nf-text-primary: #0E1B2E;
  --nf-text-secondary: rgba(14, 27, 46, 0.65);
  --nf-text-body: rgba(14, 27, 46, 0.75);
  --nf-text-muted: rgba(14, 27, 46, 0.45);
  --nf-text-muted-medium: rgba(14, 27, 46, 0.5);
  --nf-text-muted-light: rgba(14, 27, 46, 0.4);
  --nf-text-muted-subtle: rgba(14, 27, 46, 0.35);
  --nf-text-muted-lighter: rgba(14, 27, 46, 0.3);
  --nf-text-on-amber: #3F2E1A;
  --nf-text-on-amber-muted: rgba(63, 46, 26, 0.85);

  /* --- Border Colors --- */
  --nf-border: rgba(14, 27, 46, 0.1);
  --nf-border-light: rgba(14, 27, 46, 0.08);
  --nf-border-lighter: rgba(14, 27, 46, 0.06);

  /* --- Shadow --- */
  --nf-shadow-sm: rgba(14, 27, 46, 0.06);
  --nf-shadow-md: rgba(14, 27, 46, 0.08);
  --nf-shadow-primary: rgba(217, 119, 6, 0.12);

  /* --- Table Specific --- */
  --nf-table-header-bg: #FFFAF2;
  --nf-table-row-hover: rgba(255, 250, 242, 0.5);

  /* ========================================================================
     DARK THEME  (via .dark class)
     ======================================================================== */
  /* Note: Dark theme variables are set on .dark and also used directly
     in Anasayfa/Solutions widgets which are always dark. */

  --nf-bg-dark: #030712;
  --nf-bg-navy: #0E1B2E;
  --nf-surface-dark: #0a0f1a;

  --nf-text-on-dark: #FFFFFF;
  --nf-text-on-dark-secondary: #94a3b8;
  --nf-text-on-dark-muted: #64748b;
  --nf-text-on-dark-tertiary: #475569;
  --nf-text-on-dark-soft: rgba(248, 246, 241, 0.7);
  --nf-text-on-dark-mild: rgba(248, 246, 241, 0.5);
  --nf-text-on-dark-faint: rgba(248, 246, 241, 0.4);
  --nf-text-on-dark-white-muted: rgba(255, 255, 255, 0.45);
  --nf-text-on-dark-white-body: rgba(255, 255, 255, 0.65);

  --nf-border-dark: rgba(255, 255, 255, 0.1);
  --nf-border-dark-light: rgba(255, 255, 255, 0.05);

  /* ========================================================================
     GRADIENTS
     ======================================================================== */

  /* Anasayfa Hero gradient */
  --nf-gradient-hero-title: linear-gradient(to right, #3b82f6, #06b6d4, #a855f7);
  --nf-gradient-hero-btn: linear-gradient(to right, #2563eb, #3b82f6);
  --nf-gradient-hero-bg: linear-gradient(to bottom right, rgba(30, 90, 255, 0.15), #030712, rgba(147, 51, 234, 0.1));
  --nf-gradient-hero-conic: conic-gradient(from 180deg at 50% 50%, rgba(37, 99, 235, 0.1) 0deg, transparent 180deg, rgba(147, 51, 234, 0.1) 360deg);

  /* Solutions process gradient */
  --nf-gradient-process-accent: linear-gradient(to right, #a855f7, #ec4899);

  /* Success widget gradient */
  --nf-gradient-amber-accent: linear-gradient(to right, #f59e0b, #fbbf24);

  /* Web Tasarım amber gradients */
  --nf-gradient-amber-subtle: linear-gradient(to bottom right, #FEF7EC, #FCE8C3);
  --nf-gradient-amber-warm: linear-gradient(to bottom right, #FEF3D7, #FCE8C3);

  /* Hero mesh gradient (Web Tasarım) */
  --nf-gradient-mesh-amber: radial-gradient(circle at 75% 25%, rgba(217, 119, 6, 0.32) 0%, rgba(14, 27, 46, 0) 45%);
  --nf-gradient-mesh-cream: radial-gradient(circle at 18% 78%, rgba(248, 246, 241, 0.10) 0%, rgba(14, 27, 46, 0) 50%);
  --nf-gradient-mesh-conic: conic-gradient(from 200deg at 65% 35%, rgba(217, 119, 6, 0.18) 0deg, transparent 70deg, transparent 290deg, rgba(217, 119, 6, 0.12) 360deg);

  /* AI Search gradient */
  --nf-gradient-ai-search: radial-gradient(circle at 20% 30%, rgba(217, 119, 6, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(252, 211, 77, 0.15) 0%, transparent 50%);

  /* Final CTA gradient */
  --nf-gradient-cta-glow: radial-gradient(ellipse at 50% 100%, rgba(217, 119, 6, 0.16) 0%, rgba(14, 27, 46, 0) 60%);

  /* Process connecting line */
  --nf-gradient-process-line: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(168, 85, 247, 0.2), rgba(16, 185, 129, 0.2));

  --nf-base-bg-primary: var(--nf-bg-primary);
  --nf-base-bg-alt: var(--nf-bg-alt);
  --nf-base-bg-muted: var(--nf-bg-muted);
  --nf-base-surface: var(--nf-surface);
  --nf-base-surface-dark: var(--nf-surface-dark);

  --nf-base-text-primary: var(--nf-text-primary);
  --nf-base-text-secondary: var(--nf-text-secondary);
  --nf-base-text-body: var(--nf-text-body);
  --nf-base-text-muted: var(--nf-text-muted);
  --nf-base-text-on-dark: var(--nf-text-on-dark);
  --nf-base-text-on-dark-secondary: var(--nf-text-on-dark-secondary);

  --nf-base-border: var(--nf-border);
  --nf-base-border-light: var(--nf-border-light);
  --nf-base-border-dark: var(--nf-border-dark);
  --nf-base-border-dark-light: var(--nf-border-dark-light);
}

/* ========================================================================
   DARK THEME OVERRIDES
   Applies when parent has .dark class (used by Solutions widgets)
   ======================================================================== */
.dark {
  --nf-bg-primary: #030712;
  --nf-bg-alt: #030712;
  --nf-bg-warm: #030712;
  --nf-bg-muted: #0a0f1a;
  --nf-surface: #030712;
  --nf-surface-amber: transparent;
  --nf-surface-amber-medium: transparent;
  --nf-text-primary: #FFFFFF;
  --nf-text-secondary: #94a3b8;
  --nf-text-body: rgba(255, 255, 255, 0.75);
  --nf-text-muted: #64748b;
  --nf-text-muted-medium: #64748b;
  --nf-text-muted-light: #475569;
  --nf-text-on-amber: #FFFFFF;
  --nf-text-on-amber-muted: rgba(255, 255, 255, 0.7);
  --nf-border: rgba(255, 255, 255, 0.1);
  --nf-border-light: rgba(255, 255, 255, 0.08);
  --nf-border-lighter: rgba(255, 255, 255, 0.06);
  --nf-shadow-sm: rgba(0, 0, 0, 0.3);
  --nf-shadow-md: rgba(0, 0, 0, 0.4);
  --nf-table-header-bg: rgba(255, 255, 255, 0.05);
  --nf-table-row-hover: rgba(255, 255, 255, 0.03);

  --nf-base-bg-primary: var(--nf-bg-primary);
  --nf-base-bg-alt: var(--nf-bg-alt);
  --nf-base-bg-muted: var(--nf-bg-muted);
  --nf-base-surface: var(--nf-surface);
  --nf-base-surface-dark: var(--nf-surface-dark);

  --nf-base-text-primary: var(--nf-text-primary);
  --nf-base-text-secondary: var(--nf-text-secondary);
  --nf-base-text-body: var(--nf-text-body);
  --nf-base-text-muted: var(--nf-text-muted);
  --nf-base-text-on-dark: var(--nf-text-on-dark);
  --nf-base-text-on-dark-secondary: var(--nf-text-on-dark-secondary);

  --nf-base-border: var(--nf-border);
  --nf-base-border-light: var(--nf-border-light);
  --nf-base-border-dark: var(--nf-border-dark);
  --nf-base-border-dark-light: var(--nf-border-dark-light);
}

.elementor-widget[class*="elementor-widget-nanoflow_"] {
  --nf-bg-primary: var(--nf-widget-bg, var(--nf-base-bg-primary));
  --nf-bg-alt: var(--nf-widget-bg, var(--nf-base-bg-alt));
  --nf-bg-muted: var(--nf-widget-bg, var(--nf-base-bg-muted));
  --nf-surface: var(--nf-widget-bg, var(--nf-base-surface));
  --nf-surface-dark: var(--nf-widget-bg, var(--nf-base-surface-dark));

  --nf-text-primary: var(--nf-widget-text, var(--nf-base-text-primary));
  --nf-text-secondary: var(--nf-widget-text, var(--nf-base-text-secondary));
  --nf-text-body: var(--nf-widget-text, var(--nf-base-text-body));
  --nf-text-muted: var(--nf-widget-text, var(--nf-base-text-muted));
  --nf-text-on-dark: var(--nf-widget-text, var(--nf-base-text-on-dark));
  --nf-text-on-dark-secondary: var(--nf-widget-text, var(--nf-base-text-on-dark-secondary));

  --nf-border: var(--nf-widget-border, var(--nf-base-border));
  --nf-border-light: var(--nf-widget-border, var(--nf-base-border-light));
  --nf-border-dark: var(--nf-widget-border, var(--nf-base-border-dark));
  --nf-border-dark-light: var(--nf-widget-border, var(--nf-base-border-dark-light));
}

.elementor-widget[class*="elementor-widget-nanoflow_"] > .elementor-widget-container {
  background-color: var(--nf-widget-bg, transparent);
  color: var(--nf-widget-text, inherit);
  border-color: var(--nf-widget-border, currentColor);
}