/* ============================================================
   remind-r.eu -- Design Tokens
   Industriel raffine. Ombres portees, jamais de bordures colorees.
   ============================================================ */

:root {
  /* --- Typographie (Poppins local, zero CDN ; pile systeme en secours) --- */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* --- Navy (couleur principale) --- */
  --navy-50: #F0F3F8;
  --navy-100: #D9E0ED;
  --navy-200: #B3C1DB;
  --navy-300: #7E96BD;
  --navy-400: #4A6A9F;
  --navy-500: #1E3A6E;
  --navy-600: #162D56;
  --navy-700: #0F2040;
  --navy-800: #0A162D;
  --navy-900: #060D1A;

  /* --- Ambre (accent unique) --- */
  --amber-50: #FFF9ED;
  --amber-100: #FFEFC8;
  --amber-200: #FFDF91;
  --amber-300: #FFC94D;
  --amber-400: #F5A623;
  --amber-500: #D98B0A;
  --amber-600: #B07008;

  /* --- Semantique --- */
  --success-light: #ECFDF3;
  --success: #10B981;
  --success-dark: #065F46;
  --warning-light: #FFFBEB;
  --warning: #F59E0B;
  --warning-dark: #78350F;
  --danger-light: #FEF2F2;
  --danger: #EF4444;
  --danger-dark: #7F1D1D;
  --info-light: #EFF6FF;
  --info: #3B82F6;
  --info-dark: #1E3A5F;

  /* --- Neutres --- */
  --n0: #FFFFFF;
  --n25: #FAFBFC;
  --n50: #F5F6F8;
  --n100: #ECEEF2;
  --n200: #D8DBE3;
  --n300: #B8BCC8;
  --n400: #8C92A1;
  --n500: #6B7280;
  --n600: #4B5563;
  --n700: #374151;
  --n800: #1F2937;
  --n900: #111827;

  /* --- Theme Light (defaut) --- */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --border: #ECEEF2;
  --border-subtle: #F0F1F4;

  /* --- Ombres (coeur du design) --- */
  --shadow-xs: 0 1px 2px rgba(15, 32, 64, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 32, 64, 0.05), 0 1px 2px rgba(15, 32, 64, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 32, 64, 0.06), 0 2px 4px rgba(15, 32, 64, 0.03);
  --shadow-lg: 0 8px 24px rgba(15, 32, 64, 0.08), 0 4px 8px rgba(15, 32, 64, 0.03);
  --shadow-xl: 0 16px 40px rgba(15, 32, 64, 0.10), 0 6px 12px rgba(15, 32, 64, 0.04);
  --shadow-hover: 0 6px 16px rgba(15, 32, 64, 0.09), 0 3px 6px rgba(15, 32, 64, 0.04);
  --shadow-inner: inset 0 1px 3px rgba(15, 32, 64, 0.06);
  --shadow-focus: 0 0 0 3px rgba(74, 106, 159, 0.25);

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* --- Z-Index --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --- Layout --- */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 64px;
  --content-max-w: 1320px;

  /* --- Co-branding idewe (couleurs marque -- ne pas confondre avec navy/ambre remind-r) --- */
  --idewe-cyan: #1B9FD6;        /* feuille gauche + tete */
  --idewe-cyan-strong: #1789BC;
  --idewe-navy: #0F4C6B;        /* feuille droite + wordmark idewe */
  --idewe-navy-soft: #2E6E8E;
  --idewe-wordmark: #0F4C6B;    /* eclairci en dark mode (dark-mode.css) */
  --cobrand-sep: var(--border); /* separateur neutre du lockup (jamais une couleur) */

  /* --- Marketing sensoriel : profondeur tactile (ombres etagees + halo) --- */
  --shadow-2xl: 0 28px 64px rgba(15, 32, 64, 0.14), 0 10px 22px rgba(15, 32, 64, 0.06);
  --shadow-press: inset 0 2px 5px rgba(15, 32, 64, 0.12);     /* enfoncement au clic */
  --glow-amber: 0 0 0 4px rgba(245, 166, 35, 0.16);           /* halo CTA (focus/hover) */
  --glow-navy: 0 0 0 4px rgba(30, 58, 110, 0.14);
  --glow-idewe: 0 0 0 4px rgba(27, 159, 214, 0.18);           /* halo accent idewe */
  --sheen: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%);

  /* --- Mouvement (courbes & durees : reactions vivantes, jamais de bounce excessif) --- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);            /* sortie douce, "satisfaisante" */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);           /* leger rebond maitrise (badges, toasts) */
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.12s;   /* tap feedback */
  --dur-2: 0.2s;    /* hover standard */
  --dur-3: 0.32s;   /* entrees / transitions de vue */
  --dur-4: 0.5s;    /* reveals amples */
  --lift-1: -1px;   /* survol carte */
  --lift-2: -3px;   /* survol element interactif fort */
  --press-1: 1px;   /* enfoncement au clic */
}