/* ============================================================
   Design Tokens — Processus Législatif v2
   Theme: Dark + Green (inspired by TRAE.ai)
   Dark by default — clean, modern, professional
   ============================================================ */

:root {
  /* --- Core palette --- */
  --color-bg:          #0A0A0A;   /* Near-black background */
  --color-bg-alt:      #111111;   /* Card / surface background */
  --color-bg-elevated: #1A1A1A;   /* Elevated panels, dropdowns */
  --color-sidebar-bg:  #0D0D0D;   /* Sidebar — slightly off-black */

  /* --- Text --- */
  --color-primary:     #F1F5F9;   /* Main text — near white */
  --color-secondary:   #94A3B8;   /* Secondary text — muted */
  --color-text:        #F1F5F9;   /* Body text */
  --color-text-muted:  #94A3B8;   /* Muted text */
  --color-text-subtle: #64748B;   /* Subtle / placeholder */

  /* --- Accent: Green (TRAE-inspired) --- */
  --color-accent:       #22C55E;  /* Green-500 — primary CTA */
  --color-accent-hover: #4ADE80;  /* Green-400 — hover state */
  --color-accent-dim:   rgba(34, 197, 94, 0.12); /* Accent tint background */
  --color-accent-border:rgba(34, 197, 94, 0.25); /* Accent border */

  /* --- Borders --- */
  --color-border:       #1E1E1E;  /* Subtle dark border */
  --color-border-mid:   #2A2A2A;  /* Mid-weight border */
  --color-border-focus: #22C55E;  /* Focus — green */

  /* --- Semantic colors --- */
  --color-success:     #22C55E;
  --color-success-bg:  rgba(34, 197, 94, 0.1);
  --color-warning:     #F59E0B;
  --color-warning-bg:  rgba(245, 158, 11, 0.1);
  --color-danger:      #EF4444;
  --color-danger-bg:   rgba(239, 68, 68, 0.1);
  --color-info:        #38BDF8;
  --color-info-bg:     rgba(56, 189, 248, 0.1);

  /* --- Neutrals (dark scale — reversed) --- */
  --neutral-50:  #0A0A0A;
  --neutral-100: #111111;
  --neutral-200: #1A1A1A;
  --neutral-300: #2A2A2A;
  --neutral-400: #3F3F3F;
  --neutral-500: #525252;
  --neutral-600: #737373;
  --neutral-700: #A3A3A3;
  --neutral-800: #D4D4D4;
  --neutral-900: #F5F5F5;

  /* --- Workflow status badge colors (dark-optimized) --- */
  --badge-draft:           #94A3B8;
  --badge-draft-bg:        rgba(148, 163, 184, 0.12);
  --badge-depot:           #38BDF8;
  --badge-depot-bg:        rgba(56, 189, 248, 0.12);
  --badge-commission:      #A78BFA;
  --badge-commission-bg:   rgba(167, 139, 250, 0.12);
  --badge-warning:         #FCD34D;
  --badge-warning-bg:      rgba(252, 211, 77, 0.12);
  --badge-success:         #34D399;
  --badge-success-bg:      rgba(52, 211, 153, 0.12);
  --badge-promulgation:    #22C55E;
  --badge-promulgation-bg: rgba(34, 197, 94, 0.15);
  --badge-danger:          #F87171;
  --badge-danger-bg:       rgba(248, 113, 113, 0.12);
  --badge-ajourne:         #FB923C;
  --badge-ajourne-bg:      rgba(251, 146, 60, 0.12);
  --badge-dark:            #94A3B8;
  --badge-dark-bg:         rgba(148, 163, 184, 0.08);
  --badge-info:            #38BDF8;
  --badge-info-bg:         rgba(56, 189, 248, 0.12);

  /* --- Typography --- */
  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

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

  /* --- Spacing (8px base unit) --- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* --- Border radius --- */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* --- Shadows (dark-appropriate — glow-based) --- */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 20px 50px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(34, 197, 94, 0.15); /* Green glow for accent elements */

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Layout --- */
  --sidebar-width:     256px;
  --sidebar-collapsed: 60px;
  --content-max:       1400px;
  --header-height:     60px;

  /* --- Z-index scale --- */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
  --z-tooltip:  60;

  /* --- Focus ring — green accent --- */
  --focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

/* === Light mode override (optional — user can toggle) === */
[data-theme="light"] {
  --color-bg:           #F8FAFC;
  --color-bg-alt:       #F1F5F9;
  --color-bg-elevated:  #FFFFFF;
  --color-sidebar-bg:   #0F172A;

  --color-primary:      #0F172A;
  --color-secondary:    #334155;
  --color-text:         #020617;
  --color-text-muted:   #475569;
  --color-text-subtle:  #64748B;

  --color-accent:       #16A34A;
  --color-accent-hover: #15803D;
  --color-accent-dim:   rgba(22, 163, 74, 0.1);
  --color-accent-border:rgba(22, 163, 74, 0.25);

  --color-border:       #E2E8F0;
  --color-border-mid:   #CBD5E1;
  --color-border-focus: #16A34A;

  --color-success-bg:  #DCFCE7;
  --color-warning-bg:  #FEF9C3;
  --color-danger-bg:   #FEE2E2;
  --color-info-bg:     #E0F2FE;

  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  --badge-draft-bg:        #F1F5F9;
  --badge-depot-bg:        #E0F2FE;
  --badge-commission-bg:   #F5F3FF;
  --badge-warning-bg:      #FEF3C7;
  --badge-success-bg:      #D1FAE5;
  --badge-promulgation-bg: #A7F3D0;
  --badge-danger-bg:       #FEE2E2;
  --badge-ajourne-bg:      #FED7AA;
  --badge-dark-bg:         #CBD5E1;
  --badge-info-bg:         #E0F2FE;

  --badge-draft:       #64748B;
  --badge-depot:       #0369A1;
  --badge-commission:  #7C3AED;
  --badge-warning:     #D97706;
  --badge-success:     #059669;
  --badge-promulgation:#065F46;
  --badge-danger:      #DC2626;
  --badge-ajourne:     #EA580C;
  --badge-dark:        #1E293B;
  --badge-info:        #0369A1;

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:  0 4px 6px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-lg:  0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 20px 25px rgba(15, 23, 42, 0.1), 0 8px 10px rgba(15, 23, 42, 0.06);
  --shadow-glow:0 0 20px rgba(22, 163, 74, 0.12);

  --focus-ring: 0 0 0 3px rgba(22, 163, 74, 0.3);
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
