/* ============================================
   Base Styles - Reset & Fundamentals
   Aligneer Design System v1.0
   ============================================ */

/* ===== CSS VARIABLES - DESIGN SYSTEM ===== */
:root {
    /* Primary - Navy Blue */
    --primary: #1e3a8a;
    --primary-light: #3b82f6;
    --primary-dark: #1e40af;
    --primary-50: #eff6ff;
    
    /* Slate - Corporate Gray Scale */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    
    /* Semantic Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --error: #dc2626;
    --error-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
    
    /* Text Colors */
    --text-primary: #334155;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-muted: var(--text-secondary);
    
    /* Borders */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;
    
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --card-bg: #ffffff;
    
    /* Typography */
    --font-2xs: 0.6875rem; /* 11px — micro labels in compact components */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Spacing */
    --spacing-2xs: 0.125rem; /* 2px — micro-spacing (compact labels, tight gaps) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-10: 0.625rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Input heights */
    --input-height-base: 2.5rem; /* 40px — standard input */
    --input-height-sm:   2rem;   /* 32px — compact input (dense multi-col forms) */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    
    --shadow-primary: 0 4px 12px rgba(30,58,138,0.2);
    --shadow-success: 0 4px 12px rgba(16,185,129,0.2);
    --shadow-error: 0 4px 12px rgba(220,38,38,0.2);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    
    /* Legacy support (deprecated - use new variables) */
    --primary-color: var(--primary);

    /* Component surface variables — defined here for light mode,
       overridden in body.dark-mode below. */
    --color-surface:     #ffffff;
    --color-surface-alt: #f1f5f9;
    --color-border:      #e2e8f0;
    --color-text:        #334155;
    --color-text-muted:  #64748b;
    --color-input-bg:    #ffffff;
    --color-row-hover:   rgba(0, 0, 0, 0.03);
    --color-hover:       rgba(0, 0, 0, 0.04);

    /* Colour aliases used by components (--color-primary etc.) */
    --color-primary:           var(--primary-light);
    --color-success:           var(--success);
    --color-danger:            var(--error);
    --color-warning:           var(--warning);
    --color-neutral:           #6b7280;
    --color-surface-secondary: var(--bg-secondary);
    --hover-bg:                var(--color-hover);

    /* Monospace font */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;

    /* Space scale (Tailwind-compatible — 1 unit = 0.25 rem) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;

    /* Skill-bar extra-segment palette (used by widgets/skill-bars.css) */
    --skill-bar-extra-0: #fb923c;  /* orange  */
    --skill-bar-extra-1: #a78bfa;  /* violet  */
    --skill-bar-extra-2: #34d399;  /* emerald */
    --skill-bar-extra-3: #f472b6;  /* rose    */

    /* KPI / accent colour (indigo) */
    --accent-kpi:       #4f46e5;
    --accent-kpi-mid:   #6366f1;
    --accent-kpi-light: #818cf8;

    /* Semantic surface tokens (light-mode defaults; remapped in dark-mode below) */
    --surface-sunken:  #f9fafb;   /* gray-50 — slightly recessed bg (forms, zebra stripes) */

    /* Semantic text tokens (supplement existing --text-* scale) */
    --text-heading:    #111827;   /* gray-900 — page & card headings */
    --text-body-alt:   #374151;   /* gray-700 — secondary body copy */
}

/* ===== DARK MODE =====
   html.dark-mode est défini par le script inline dans <head> (avant le rendu)
   pour éviter le flash blanc. body.dark-mode est ajouté ensuite par header.js
   pour les règles de composants. Les deux sélecteurs ici partagent les mêmes
   variables CSS afin que l'apparence soit correcte dès le premier paint. */
html.dark-mode,
body.dark-mode {
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;

    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --card-bg: #1e293b;

    /* Remap light-end of the slate scale for dark backgrounds.
       slate-500 → slate-900 keep their light-mode values because
       existing body.dark-mode rules intentionally reference them
       as dark surface colours (e.g. matrix-table.css uses
       --slate-800 = #1e293b as a dark cell background).
       NOTE: --slate-300 is NOT remapped here because existing dark mode
       rules in buttons.css/filter-builder/etc. use var(--slate-300)
       explicitly as a light text/border color on dark backgrounds. */
    --slate-50:  #0f172a;
    --slate-100: #1e293b;
    --slate-200: #273548;
    
    --border-color: #334155;
    --border-light: #1e293b;
    --border-dark: #475569;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);

    /* Component variables */
    --color-surface:     #1e293b;
    --color-surface-alt: #273548;
    --color-border:      #334155;
    --color-text:        #f1f5f9;
    --color-text-muted:  #94a3b8;
    --color-input-bg:    #1e293b;
    --color-row-hover:   rgba(255, 255, 255, 0.04);
    --color-hover:       rgba(255, 255, 255, 0.06);

    /* Colour aliases — dark overrides */
    --success:                 #4ade80; /* vert clair pour dark mode */
    --color-danger:            #f87171;
    --color-surface-secondary: var(--color-surface-alt);
    --hover-bg:                var(--color-hover);

    /* Semantic light variants — darkened for dark backgrounds */
    --success-light: rgba(16, 185, 129, 0.15);
    --warning-light: rgba(245, 158, 11, 0.15);
    --error-light:   rgba(220, 38, 38, 0.15);
    --info-light:    rgba(59, 130, 246, 0.15);

    /* Semantic token dark overrides */
    --surface-sunken:  var(--slate-50);    /* → #0f172a in dark */
    --text-heading:    #f1f5f9;
    --text-body-alt:   #94a3b8;
}

/* ===== BASE RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

main {
    flex: 1;
}