/* Maxilasoft Design System — Tokens v1.0
 * Source : DESIGNSYSTEM.md (racine du projet)
 * À importer en premier dans tous les écrans : <link rel="stylesheet" href="/css/tokens.css">
 */
@import url('components.css');

:root {
  /* Brand */
  --color-brand:        #1a4d7a;
  --color-brand-dark:   #123d63;
  --color-brand-blue:   #3b82f6;   /* dark mode primary */

  /* Surfaces */
  --color-bg-light:     #f5f3f0;
  --color-bg-dark:      #0f1729;
  --color-surface:      #ffffff;
  --color-surface-dark: #141c2e;
  --color-sidebar-dark: #0c1221;

  /* Borders */
  --color-border:       #e0dbd5;
  --color-border-dark:  #1e2a45;

  /* Text */
  --color-text:         #1c1c1c;
  --color-text-muted:   #5a5a5a;
  --color-text-subtle:  #8a8a8a;
  --color-text-inv:     #f0f4ff;
  --color-text-brand:   #1a4d7a;

  /* Status */
  --color-success:      #3a6b48;
  --color-warning:      #a55a1e;
  --color-error:        #8a2f24;
  --color-info:         #1a4d7a;

  /* Fonts */
  --font-sans:          'Plus Jakarta Sans', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* Spacing (base 4) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shadows light */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  /* Transitions */
  --t-fast: 150ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 300ms ease-out;
}

html.dark, html.light-theme.dark, body.dark {
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.50);
}