/* ============================================================
   LOKPRO — BRAND KIT CSS
   Palette : Neon District
   Typo    : Space Grotesk (titres) + Inter (corps)
   Version : 1.0 — Juin 2026
   ============================================================ */

/* ------------------------------------------------------------
   IMPORT FONTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   CSS VARIABLES — PALETTE NEON DISTRICT
   ------------------------------------------------------------ */
:root {

  /* Couleurs primaires */
  --lk-violet:        #6C2BD9;
  --lk-violet-light:  #A080FF;
  --lk-violet-dark:   #4A1D99;
  --lk-violet-muted:  #6C2BD922;

  --lk-green:         #00F5A0;
  --lk-green-dark:    #00C87A;  /* version fond clair */
  --lk-green-muted:   #00F5A022;

  --lk-pink:          #FF2D8A;
  --lk-pink-dark:     #D4006A;  /* version fond clair */
  --lk-pink-muted:    #FF2D8A22;

  /* Fonds */
  --lk-bg-0:          #0A0A1A;  /* fond principal */
  --lk-bg-1:          #0F0F22;  /* surface carte */
  --lk-bg-2:          #1A1A35;  /* bordures / séparateurs */
  --lk-bg-3:          #2A2A4A;  /* hover states */

  /* Textes */
  --lk-text-primary:  #E8E8FF;
  --lk-text-secondary:#6666AA;
  --lk-text-tertiary: #4444AA;
  --lk-text-disabled: #2A2A55;

  /* Fond clair (usage emails, docs) */
  --lk-light-bg:      #F7F7F5;
  --lk-light-text:    #0D1B2A;

  /* Statuts */
  --lk-success:       #00F5A0;
  --lk-warning:       #FFB800;
  --lk-error:         #FF2D8A;
  --lk-info:          #6C2BD9;
  --lk-neutral:       #1A1A35;

  /* Typographie */
  --lk-font-display:  'Space Grotesk', sans-serif;
  --lk-font-body:     'Inter', sans-serif;

  /* Tailles de police */
  --lk-text-xs:       11px;
  --lk-text-sm:       13px;
  --lk-text-base:     15px;
  --lk-text-md:       17px;
  --lk-text-lg:       22px;
  --lk-text-xl:       28px;
  --lk-text-2xl:      36px;
  --lk-text-3xl:      48px;

  /* Espacements */
  --lk-space-xs:      4px;
  --lk-space-sm:      8px;
  --lk-space-md:      16px;
  --lk-space-lg:      24px;
  --lk-space-xl:      40px;
  --lk-space-2xl:     64px;

  /* Rayons */
  --lk-radius-sm:     4px;
  --lk-radius-md:     8px;
  --lk-radius-lg:     12px;
  --lk-radius-xl:     16px;
  --lk-radius-full:   9999px;

  /* Ombres */
  --lk-shadow-sm:     0 1px 3px rgba(108, 43, 217, 0.15);
  --lk-shadow-md:     0 4px 16px rgba(108, 43, 217, 0.2);
  --lk-shadow-lg:     0 8px 32px rgba(108, 43, 217, 0.3);
  --lk-shadow-glow:   0 0 20px rgba(0, 245, 160, 0.2);

  /* Transitions */
  --lk-transition:    150ms ease;
  --lk-transition-md: 250ms ease;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--lk-bg-0);
  color: var(--lk-text-primary);
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   TYPOGRAPHIE
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lk-font-display);
  font-weight: 700;
  color: var(--lk-text-primary);
  line-height: 1.2;
  margin: 0 0 var(--lk-space-md);
}

h1 { font-size: var(--lk-text-3xl); font-weight: 700; }
h2 { font-size: var(--lk-text-2xl); }
h3 { font-size: var(--lk-text-xl); }
h4 { font-size: var(--lk-text-lg); }
h5 { font-size: var(--lk-text-md); }
h6 { font-size: var(--lk-text-base); }

p {
  font-family: var(--lk-font-body);
  color: var(--lk-text-secondary);
  margin: 0 0 var(--lk-space-md);
}

.lk-eyebrow {
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lk-violet);
}

/* ------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------ */
.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-space-sm);
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-sm);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--lk-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--lk-transition);
  text-decoration: none;
  white-space: nowrap;
}

.lk-btn-primary {
  background: var(--lk-violet);
  color: #E8CFFF;
}
.lk-btn-primary:hover {
  background: var(--lk-violet-dark);
  box-shadow: var(--lk-shadow-md);
}

.lk-btn-cta {
  background: var(--lk-green);
  color: #003D28;
  font-weight: 600;
}
.lk-btn-cta:hover {
  background: var(--lk-green-dark);
  box-shadow: var(--lk-shadow-glow);
}

.lk-btn-outline {
  background: transparent;
  color: var(--lk-violet-light);
  border: 1px solid var(--lk-violet);
}
.lk-btn-outline:hover {
  background: var(--lk-violet-muted);
}

.lk-btn-ghost {
  background: transparent;
  color: var(--lk-text-secondary);
  border: 1px solid var(--lk-bg-2);
}
.lk-btn-ghost:hover {
  background: var(--lk-bg-1);
  color: var(--lk-text-primary);
}

.lk-btn-sm { padding: 5px 12px; font-size: var(--lk-text-xs); }
.lk-btn-lg { padding: 12px 24px; font-size: var(--lk-text-base); }

/* ------------------------------------------------------------
   BADGES
   ------------------------------------------------------------ */
.lk-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-xs);
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--lk-radius-sm);
}

.lk-badge-violet   { background: var(--lk-violet-muted);  color: var(--lk-violet-light); }
.lk-badge-green    { background: var(--lk-green-muted);   color: var(--lk-green); }
.lk-badge-pink     { background: var(--lk-pink-muted);    color: var(--lk-pink); }
.lk-badge-neutral  { background: var(--lk-bg-2);          color: var(--lk-text-secondary); }
.lk-badge-warning  { background: #FFB80022;               color: #FFB800; }

/* ------------------------------------------------------------
   CARTES
   ------------------------------------------------------------ */
.lk-card {
  background: var(--lk-bg-1);
  border: 0.5px solid var(--lk-bg-2);
  border-radius: var(--lk-radius-lg);
  overflow: hidden;
  transition: border-color var(--lk-transition), box-shadow var(--lk-transition);
}

.lk-card:hover {
  border-color: var(--lk-violet);
  box-shadow: var(--lk-shadow-md);
}

.lk-card-body { padding: var(--lk-space-md); }

/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */
.lk-input {
  width: 100%;
  background: var(--lk-bg-1);
  border: 1px solid var(--lk-bg-2);
  border-radius: var(--lk-radius-md);
  color: var(--lk-text-primary);
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-sm);
  padding: 9px 13px;
  outline: none;
  transition: border-color var(--lk-transition);
}

.lk-input::placeholder { color: var(--lk-text-tertiary); }

.lk-input:focus {
  border-color: var(--lk-violet);
  box-shadow: 0 0 0 3px var(--lk-violet-muted);
}

/* ------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------ */
.lk-nav {
  background: var(--lk-bg-0);
  border-bottom: 0.5px solid var(--lk-bg-2);
  padding: 0 var(--lk-space-xl);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.lk-nav-logo img { height: 32px; display: block; }

.lk-nav-links {
  display: flex;
  gap: var(--lk-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lk-nav-links a {
  font-family: var(--lk-font-body);
  font-size: var(--lk-text-sm);
  color: var(--lk-text-secondary);
  text-decoration: none;
  transition: color var(--lk-transition);
}

.lk-nav-links a:hover { color: var(--lk-text-primary); }
.lk-nav-links a.active { color: var(--lk-green); }

/* ------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------ */
.lk-text-violet  { color: var(--lk-violet-light); }
.lk-text-green   { color: var(--lk-green); }
.lk-text-pink    { color: var(--lk-pink); }
.lk-text-muted   { color: var(--lk-text-secondary); }

.lk-divider {
  height: 0.5px;
  background: var(--lk-bg-2);
  border: none;
  margin: var(--lk-space-lg) 0;
}

.lk-surface {
  background: var(--lk-bg-1);
  border: 0.5px solid var(--lk-bg-2);
  border-radius: var(--lk-radius-lg);
  padding: var(--lk-space-lg);
}

/* ------------------------------------------------------------
   FIN LOKPRO BRAND KIT
   ============================================================ */