/*
 * FLOWAYZ DESIGN SYSTEM - DESIGN TOKENS
 * Premium B2B SaaS Design Tokens
 * Modern, Fluid, Energetic but Professional
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* === COLORS === */
  /* Primary Palette */
  --flowayz-navy: #1A3C6B;         /* Profondeur, stabilité - Header/Nav */
  --flowayz-coral: #FF7B54;        /* Énergie, créativité - CTA/Buttons */
  --flowayz-cream: #FFF5E4;        /* Douceur, approchable - Background */

  /* Accents */
  --flowayz-teal: #38B2AC;         /* Fraîcheur, innovation - Features */
  --flowayz-gold: #FFD166;         /* Premium, succès - Highlights */

  /* RGB values for opacity variations */
  --flowayz-navy-rgb: 26, 60, 107;
  --flowayz-coral-rgb: 255, 123, 84;
  --flowayz-teal-rgb: 56, 178, 172;
  --flowayz-gold-rgb: 255, 209, 102;

  /* Neutral (pour textes et UI) */
  --flowayz-gray-50: #F7FAFC;
  --flowayz-gray-100: #EDF2F7;
  --flowayz-gray-200: #E2E8F0;
  --flowayz-gray-300: #CBD5E0;
  --flowayz-gray-400: #A0AEC0;
  --flowayz-gray-500: #718096;
  --flowayz-gray-600: #4A5568;
  --flowayz-gray-700: #2D3748;
  --flowayz-gray-800: #1A202C;
  --flowayz-gray-900: #171923;

  /* === TYPOGRAPHY === */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', sans-serif;

  /* Font Scale */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === SPACING (8px Grid System) === */
  --space-0: 0;
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.5rem;       /* 24px */
  --space-6: 2rem;         /* 32px */
  --space-7: 3rem;         /* 48px */
  --space-8: 4rem;         /* 64px */
  --space-9: 6rem;         /* 96px */
  --space-10: 8rem;        /* 128px */

  /* === SHADOWS === */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12px 60px rgba(0, 0, 0, 0.20);

  /* Colored Shadows */
  --shadow-coral: 0 4px 14px 0 rgba(255, 123, 84, 0.3);
  --shadow-coral-lg: 0 6px 20px rgba(255, 123, 84, 0.4);
  --shadow-teal: 0 4px 14px 0 rgba(56, 178, 172, 0.3);
  --shadow-navy: 0 4px 14px 0 rgba(26, 60, 107, 0.2);

  /* === BORDER RADIUS === */
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px */
  --radius-2xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === BREAKPOINTS (for reference) === */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* === LAYOUT === */
  --header-height: 56px;
  --sidebar-width: 256px;

  /* === SEMANTIC COLORS (Light Mode Default) === */
  /* Backgrounds */
  --bg-primary: #FFF5E4;           /* Fond principal (cream) */
  --bg-surface: #FFFFFF;           /* Cards, surfaces élevées (alias de bg-secondary) */
  --bg-secondary: #FFFFFF;         /* Cards, surfaces élevées */
  --bg-surface-hover: #F7FAFC;     /* Hover states (alias de bg-tertiary) */
  --bg-tertiary: #F7FAFC;          /* Inputs, hover states */
  --bg-accent: #EDF2F7;            /* Active states, selected */
  --bg-sidebar: #FFF5E4;           /* Sidebar (crème en light comme le fond principal) */

  /* Text Colors */
  --text-primary: #1A202C;         /* Titres, texte principal */
  --text-secondary: #4A5568;       /* Texte secondaire */
  --text-tertiary: #A0AEC0;        /* Placeholders, disabled (plus cohérent) */
  --text-muted: #718096;           /* Placeholders, disabled */
  --text-inverse: #FFFFFF;         /* Sur backgrounds foncés */

  /* Borders */
  --border-default: #E2E8F0;       /* Borders normales (alias principal) */
  --border: #E2E8F0;               /* Borders normales */
  --border-light: #F7FAFC;         /* Borders très subtiles */
  --border-strong: #CBD5E0;        /* Borders accentuées */

  /* Status Colors */
  --bg-error: #fef2f2;             /* Error background (red-50) */
  --border-error: #fecaca;         /* Error border (red-200) */
  --text-error: #dc2626;           /* Error text (red-600) */
  --bg-success: #f0fdf4;           /* Success background (green-50) */
  --border-success: #bbf7d0;       /* Success border (green-200) */
  --text-success: #16a34a;         /* Success text (green-600) */
  --bg-warning: #fffbeb;           /* Warning background (amber-50) */
  --border-warning: #fde68a;       /* Warning border (amber-200) */
  --text-warning: #d97706;         /* Warning text (amber-600) */

  /* Shadows (adaptées au thème) */
  --shadow-color: rgba(0, 0, 0, 0.12);
}

/* === DARK MODE THEME OVERRIDES === */
/* Support html.dark (Tailwind), [data-theme="dark"] (legacy), and [data-mode="dark"] (new) */
html.dark,
[data-theme="dark"],
[data-mode="dark"] {
  /* Backgrounds - Slate Palette for Professional Dark Mode */
  --bg-primary: #0F172A;           /* Slate 900 - Fond principal dark */
  --bg-surface: #1E293B;           /* Slate 800 - Cards, surfaces élevées (alias) */
  --bg-secondary: #1E293B;         /* Slate 800 - Cards, surfaces élevées */
  --bg-surface-hover: #334155;     /* Slate 700 - Hover states (alias) */
  --bg-tertiary: #334155;          /* Slate 700 - Inputs, hover states */
  --bg-accent: #475569;            /* Slate 600 - Active states */
  --bg-sidebar: #0A0F1C;           /* Sidebar encore plus sombre */

  /* Text Colors - High Contrast */
  --text-primary: #F1F5F9;         /* Slate 100 - Titres, texte principal */
  --text-secondary: #CBD5E0;       /* Gray 300 - Texte secondaire */
  --text-tertiary: #64748B;        /* Slate 500 - Placeholders, disabled */
  --text-muted: #94A3B8;           /* Slate 400 - Placeholders, disabled */
  --text-inverse: #FFFFFF;         /* Toujours blanc sur fonds colorés */

  /* Borders - Subtle but visible */
  --border-default: #334155;       /* Slate 700 - Borders normales (alias) */
  --border: #334155;               /* Slate 700 - Borders normales */
  --border-light: #1E293B;         /* Slate 800 - Borders subtiles */
  --border-strong: #475569;        /* Slate 600 - Borders accentuées */

  /* Status Colors - Dark Mode */
  --bg-error: #450a0a;             /* Error background (red-950) */
  --border-error: #7f1d1d;         /* Error border (red-900) */
  --text-error: #fca5a5;           /* Error text (red-300) */
  --bg-success: #052e16;           /* Success background (green-950) */
  --border-success: #166534;       /* Success border (green-800) */
  --text-success: #86efac;         /* Success text (green-300) */
  --bg-warning: #451a03;           /* Warning background (amber-950) */
  --border-warning: #78350f;       /* Warning border (amber-900) */
  --text-warning: #fcd34d;         /* Warning text (amber-300) */

  /* Shadows - Darker and stronger */
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 12px 60px rgba(0, 0, 0, 0.7);

  /* Accent Colors - Slightly brighter for dark mode */
  --flowayz-coral: #FF8B6B;        /* Coral ajusté +10% luminosité */
  --flowayz-teal: #4CBDB7;         /* Teal ajusté +10% luminosité */
  --flowayz-gold: #FFD980;         /* Gold ajusté +10% luminosité */
  
  /* Brand colors adapted for dark mode */
  --flowayz-cream: #0F172A;        /* Override cream to use dark primary */
  --flowayz-navy: #0A0F1C;         /* Override navy to match sidebar */
}

/* === UTILITY CLASSES === */
/* Quick-use classes that auto-adapt to dark mode */

/* Backgrounds */
.bg-primary { background: var(--bg-primary) !important; }
.bg-surface { background: var(--bg-surface) !important; }
.bg-surface-hover { background: var(--bg-surface-hover) !important; }

/* Text */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-inverse { color: var(--text-inverse) !important; }

/* Borders */
.border-default { border-color: var(--border-default) !important; }

/* === MODERATE GLOBAL OVERRIDES === */
/* Targeted !important usage to force correct colors */

/* Force body background and text */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Force common containers to use semantic backgrounds (but preserve gradients) */
.card:not([class*="bg-gradient"]):not([class*="from-"]):not([class*="to-"]),
.panel:not([class*="bg-gradient"]):not([class*="from-"]):not([class*="to-"]),
[class*="card-"]:not(.card-premium):not([class*="bg-gradient"]):not([class*="from-"]):not([class*="to-"]),
.bg-white:not(.btn):not(.badge):not([class*="btn-"]):not([class*="bg-gradient"]):not([class*="from-"]):not([class*="to-"]) {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Cards with gradients: remove forced background, keep responsiveness */
.card.bg-gradient-to-br,
.card.bg-gradient-to-r,
.card.bg-gradient-to-l,
.card.bg-gradient-to-t,
.card.bg-gradient-to-b,
.card.bg-gradient-to-tr,
.card.bg-gradient-to-tl,
.card.bg-gradient-to-bl {
  background: revert !important;
}

/* Headers and titles */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Standard text elements (avoid overriding intentionally colored text) */
p:not([class*="text-white"]):not([class*="text-coral"]):not([class*="text-navy"]):not([class*="text-teal"]):not([class*="text-gold"]),
td, th,
li:not([class*="text-"]),
span:not(.badge):not([class*="text-"]):not([class*="bg-"]):not([class*="btn-"]):not(.btn-primary span):not(.sidebar-link.active span) {
  color: var(--text-primary) !important;
}

/* Ensure smooth transitions */
* {
  transition-property: background-color, border-color, color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}