/* ============================================
   DJOLOFUI - BASE.CSS
   Variables globales et Reset
   Inspiré du thème Neutral de Shadcn
   ============================================ */

/* ===== CSS RESET MINIMAL ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== VARIABLES CSS (THEME LIGHT) ===== */
:root {
  /* === Layout === */
  --djui-radius: 0.625rem;

  /* === Couleurs de base === */
  --djui-background: #ffffff;
  --djui-foreground: #0a0a0a;

  /* === Card === */
  --djui-card: #ffffff;
  --djui-card-foreground: #0a0a0a;

  /* === Popover (Dropdown, Select, etc.) === */
  --djui-popover: #ffffff;
  --djui-popover-foreground: #0a0a0a;

  /* === Primary === */
  --djui-primary: #16a34a;
  --djui-primary-foreground: #fafafa;

  /* === Secondary === */
  --djui-secondary: #f5f5f5;
  --djui-secondary-foreground: #171717;

  /* === Muted === */
  --djui-muted: #f5f5f5;
  --djui-muted-foreground: #737373;

  /* === Accent === */
  --djui-accent: #f5f5f5;
  --djui-accent-foreground: #171717;

  /* === Destructive (Error) === */
  --djui-destructive: #ef4444;
  --djui-destructive-foreground: #fef2f2;

  /* === Success === */
  --djui-success: #22c55e;
  --djui-success-foreground: #f0fdf4;

  /* === Warning === */
  --djui-warning: #f59e0b;
  --djui-warning-foreground: #fffbeb;

  /* === Info === */
  --djui-info: #3b82f6;
  --djui-info-foreground: #eff6ff;

  /* === Border === */
  --djui-border: #e5e5e5;
  --djui-input: #e5e5e5;

  /* === Ring (Focus) === */
  --djui-ring: #a3a3a3;

  /* === Spacing === */
  --djui-spacing-xs: 0.25rem;   /* 4px */
  --djui-spacing-sm: 0.5rem;    /* 8px */
  --djui-spacing-md: 1rem;      /* 16px */
  --djui-spacing-lg: 1.5rem;    /* 24px */
  --djui-spacing-xl: 2rem;      /* 32px */
  --djui-spacing-2xl: 3rem;     /* 48px */

  /* === Border Radius === */
  --djui-radius-sm: 0.25rem;    /* 4px */
  --djui-radius-md: 0.375rem;   /* 6px */
  --djui-radius-lg: 0.5rem;     /* 8px */
  --djui-radius-xl: 0.75rem;    /* 12px */
  --djui-radius-2xl: 1rem;      /* 16px */
  --djui-radius-full: 9999px;

  /* === Shadows === */
  --djui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --djui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --djui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --djui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* === Transitions === */
  --djui-transition-fast: 150ms ease-in-out;
  --djui-transition-base: 200ms ease-in-out;
  --djui-transition-slow: 300ms ease-in-out;

  /* === Typography === */
  --djui-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --djui-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --djui-font-title: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

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

  --djui-font-normal: 400;
  --djui-font-medium: 500;
  --djui-font-semibold: 600;
  --djui-font-bold: 700;

  /* === Z-index === */
  --djui-z-dropdown: 100;
  --djui-z-sticky: 150;
  --djui-z-fixed: 200;
  --djui-z-modal-backdrop: 300;
  --djui-z-modal: 400;
  --djui-z-popover: 500;
  --djui-z-tooltip: 600;

  /* Spacing */
  --section-gap: 6rem;
  --container-max: 1200px;
  --container-px: 1.5rem;
}

/* ===== THEME DARK ===== */
.dark,
[data-theme="dark"] {
  --djui-background: #0a0a0a;
  --djui-foreground: #fafafa;

  --djui-card: #171717;
  --djui-card-foreground: #fafafa;

  --djui-popover: #171717;
  --djui-popover-foreground: #fafafa;

  --djui-primary: #e5e5e5;
  --djui-primary-foreground: #171717;

  --djui-secondary: #262626;
  --djui-secondary-foreground: #fafafa;

  --djui-muted: #262626;
  --djui-muted-foreground: #a3a3a3;

  --djui-accent: #262626;
  --djui-accent-foreground: #fafafa;

  --djui-destructive: #dc2626;
  --djui-destructive-foreground: #fef2f2;

  --djui-success: #16a34a;
  --djui-success-foreground: #f0fdf4;

  --djui-warning: #d97706;
  --djui-warning-foreground: #fffbeb;

  --djui-info: #2563eb;
  --djui-info-foreground: #eff6ff;

  --djui-border: rgba(255, 255, 255, 0.1);
  --djui-input: rgba(255, 255, 255, 0.15);

  --djui-ring: #737373;
}

/* ===== CLASSES UTILITAIRES ===== */
.djui-hidden {
  display: none !important;
}

.djui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible pour accessibilité */
.djui-focus-ring:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* ===== RESET GLOBAL ===== */
body {
  font-family: var(--djui-font-sans);
  background: var(--djui-background);
  color: var(--djui-foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font-family: inherit;
}

.property-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}