/* ═══════════════════════════════════════════════════════════
   FlowDeck — Design tokens (v5.2.0)
   Source unique de vérité pour les couleurs, typographies,
   espacements, rayons, ombres, z-index et transitions.
   Chargé APRÈS app.css : les valeurs ci-dessous font autorité.
   ═══════════════════════════════════════════════════════════ */

/* ── Palette (Notion light) ───────────────────────────────── */
:root {
  --color-text:            #37352F;
  --color-text-secondary:  #6B6B6B;
  --color-text-dim:        #9B9A97;
  --color-bg:              #FFFFFF;
  --color-bg-secondary:    #FBFBFA;
  --color-bg-sidebar:      #F7F6F3;
  --color-bg-tertiary:     #EDEDEC;
  --color-bg-hover:        #EFEFED;
  --color-bg-active:       #E8E7E4;
  --color-border:          #EDEDED;
  --color-border-strong:   #D3D3D0;

  --color-primary:         #2383E2;
  --color-primary-hover:   #1a6bc0;
  --color-danger:          #E03E3E;
  --color-danger-hover:    #C93535;
  --color-success:         #0F7B6C;
  --color-warn:            #D9730D;

  /* Aliases retro-compat (utilisés par app.css) */
  --bg-primary:            var(--color-bg);
  --bg-secondary:          var(--color-bg-secondary);
  --bg-sidebar:            var(--color-bg-sidebar);
  --bg-tertiary:           var(--color-bg-tertiary);
  --bg-hover:              var(--color-bg-hover);
  --bg-active:             var(--color-bg-active);
  --text-primary:          var(--color-text);
  --text-secondary:        var(--color-text-secondary);
  --text-dim:              var(--color-text-dim);
  --text:                  var(--color-text);
  --border:                var(--color-border);
  --border-strong:         var(--color-border-strong);
  --accent:                var(--color-primary);
  --accent-hover:          var(--color-primary-hover);
  --danger:                var(--color-danger);
  --danger-hover:          var(--color-danger-hover);

  /* ── Espacements ── */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;

  /* ── Typographie ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 30px;
  --fs-2xl: 40px;
  --font-h1: var(--fs-2xl);
  --font-h2: var(--fs-xl);
  --font-h3: var(--fs-lg);
  --font-body: var(--fs-md);
  --font-small: var(--fs-sm);
  --font-tiny: var(--fs-xs);

  /* ── Rayons ── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 99px;

  /* ── Ombres ── */
  --shadow-popover: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
  --shadow-modal: 0 12px 32px rgba(0,0,0,.12);
  --shadow-drag: 0 8px 24px rgba(0,0,0,.12);
  --shadow-toast: 0 4px 16px rgba(0,0,0,.18);

  /* ── Transitions ── */
  --transition-fast: .1s ease;
  --transition: .15s ease;
  --transition-slow: .25s ease;

  /* ── Z-index ── */
  --z-dropdown: 300;
  --z-sticky: 500;
  --z-modal: 900;
  --z-toast: 1200;
}

/* ── Palette (Notion dark) ────────────────────────────────── */
[data-theme="dark"] {
  --color-text:            #FFFFFF;
  --color-text-secondary:  #A0A0A0;
  --color-text-dim:        #6B6B6B;
  --color-bg:              #191919;
  --color-bg-secondary:    #1F1F1F;
  --color-bg-sidebar:      #202020;
  --color-bg-tertiary:     #2D2D2D;
  --color-bg-hover:        #2A2A2A;
  --color-bg-active:       #2F2E2E;
  --color-border:          #333333;
  --color-border-strong:   #4A4A4A;
}