/* ==============================================================
   ARAN Design Tokens — DSD Renov
   ==============================================================
   Design System: Professional (v4 — 12/03/2026)
   Brand:        Rouge DSD #BE3734 (primaire) + Blanc #FAFAFA
   Identite:     DSD Renov — Renovation batiment patrimonial
   ============================================================== */

:root {
    /* ========== GRAY SCALE (refined — slightly warm) ========== */
    --gray-0:  #ffffff;
    --gray-1:  #fafafa;
    --gray-2:  #f0f0f0;
    --gray-3:  #e4e4e7;
    --gray-4:  #d4d4d8;
    --gray-5:  #a1a1aa;
    --gray-6:  #71717a;
    --gray-7:  #52525b;
    --gray-8:  #3f3f46;
    --gray-9:  #27272a;
    --gray-10: #1c1c1e;
    --gray-11: #111113;
    --gray-12: #09090b;

    /* ========== SPACING (4px base) ========== */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ========== TYPOGRAPHY (Inter) ========== */
    --font-2xs: 11px;
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 14.5px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 22px;
    --font-3xl: 28px;
    --font-display-sm: 34px;
    --font-display: 42px;
    --font-display-lg: 56px;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: -0.011em;
    --letter-spacing-wide: 0.02em;

    /* ========== BORDER RADIUS ========== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ========== LAYOUT ========== */
    --rail-w: 68px;
    --context-w: 288px;
    --header-h: 52px;
    --topbar-h: 48px;
    --bottomnav-h: 56px;
    --max-content-w: 1200px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* ========== CONTROL HEIGHTS ========== */
    --control-h-xs: 24px;
    --control-h-sm: 32px;
    --control-h: 38px;
    --control-h-lg: 44px;

    /* ========== TRANSITIONS ========== */
    --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-normal: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-luxury: 500ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-icon: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-hover-lift: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease;

    /* ========== Z-INDEX SCALE ========== */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-toast: 50;
    --z-sidebar: 60;
    --z-bottomnav: 70;
    --z-command: 80;
    --z-max: 100;

    /* ========== AVATAR SIZES ========== */
    --avatar-sm: 28px;
    --avatar-md: 36px;
    --avatar-lg: 48px;

    /* ========== GLASS EFFECT ========== */
    --glass-bg: color-mix(in srgb, var(--surface) 65%, transparent);
    --glass-bg-thick: color-mix(in srgb, var(--surface) 80%, transparent);
    --glass-blur: saturate(180%) blur(20px);
    --glass-blur-light: saturate(150%) blur(12px);

    /* ========== BRAND GRADIENTS (Rouge DSD) ========== */
    --gradient-brand: linear-gradient(135deg, #BE3734, #d4605d, #a52e2b);
    --gradient-gold: linear-gradient(135deg, #BE3734, #d4605d, #BE3734);
    --gradient-gold-text: linear-gradient(135deg, #d4605d 0%, #BE3734 40%, #e07775 60%, #BE3734 100%);
    --gradient-luxury: linear-gradient(135deg, rgba(190,55,52,0.15) 0%, transparent 50%, rgba(190,55,52,0.1) 100%);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, var(--accent-surface) 0%, transparent 70%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(190,55,52,0.08) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(190,55,52,0.06) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(190,55,52,0.04) 0px, transparent 50%);

    /* ========== SHADOWS ========== */
    --shadow-apple-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
    --shadow-apple-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-apple-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-apple-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-glow-gold: 0 0 20px rgba(190,55,52,0.15), 0 0 40px rgba(190,55,52,0.08);
    --shadow-glow-patrimoine: 0 0 20px rgba(190,55,52,0.15), 0 0 40px rgba(190,55,52,0.08);
    --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-inset-subtle: inset 0 1px 2px rgba(0,0,0,0.06);
    --radius-apple-card: 16px;
    --radius-apple-btn: 12px;
    --radius-apple-input: 12px;

    /* ==========================================================
       DARK THEME (default)
       ========================================================== */

    /* Surfaces */
    --bg: #09090b;
    --bg-elevated: #18181b;
    --surface: #111113;
    --surface2: #1c1c1e;
    --surface3: #27272a;
    --surface4: #323236;

    /* Fills */
    --fill: rgba(255, 255, 255, 0.14);
    --fill-secondary: rgba(255, 255, 255, 0.09);
    --fill-tertiary: rgba(255, 255, 255, 0.05);
    --fill-quaternary: rgba(255, 255, 255, 0.02);

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-hover: rgba(255, 255, 255, 0.14);
    --border-focus: var(--accent);
    --border-gradient: linear-gradient(135deg, rgba(190,55,52,0.3), rgba(190,55,52,0.15));

    /* DSD Renov — Rouge #BE3734 (ACCENT PRIMAIRE) */
    --accent: #BE3734;
    --accent-hover: #a52e2b;
    --accent-light: #d4605d;
    --accent-lighter: #e07775;
    --accent-muted: #993030;
    --accent-glow: rgba(190, 55, 52, 0.20);
    --accent-surface: rgba(190, 55, 52, 0.08);
    --accent-bg: rgba(190, 55, 52, 0.12);

    /* DSD Renov — Rouge Patrimoine (= meme famille, plus sombre) */
    --patrimoine: #BE3734;
    --patrimoine-hover: #a52e2b;
    --patrimoine-light: #d4605d;
    --patrimoine-glow: rgba(190, 55, 52, 0.20);
    --patrimoine-surface: rgba(190, 55, 52, 0.08);

    /* Text */
    --text: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-faint: #52525b;
    --text-inverse: #fafafa;
    --text-on-accent: #ffffff;
    --text-disabled: #52525b;
    --text-placeholder: #52525b;

    /* Semantic — Success */
    --success: #22c55e;
    --success-light: #4ade80;
    --success-surface: rgba(34, 197, 94, 0.08);
    --success-border: rgba(34, 197, 94, 0.20);

    /* Semantic — Warning */
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-surface: rgba(245, 158, 11, 0.08);
    --warning-border: rgba(245, 158, 11, 0.20);

    /* Semantic — Danger */
    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-hover: #dc2626;
    --danger-surface: rgba(239, 68, 68, 0.08);
    --danger-border: rgba(239, 68, 68, 0.18);

    /* Semantic — Info */
    --info: #60a5fa;
    --info-light: #93c5fd;
    --info-surface: rgba(96, 165, 250, 0.08);
    --info-border: rgba(96, 165, 250, 0.18);

    --surface-dark: #09090b;

    /* Chat */
    --user-bg: rgba(190, 55, 52, 0.06);
    --assistant-bg: rgba(255, 255, 255, 0.015);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 20px 40px -8px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.50), 0 8px 24px rgba(0, 0, 0, 0.24);
    --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-glow);
    --shadow-focus-danger: 0 0 0 2px var(--bg), 0 0 0 4px rgba(239, 68, 68, 0.20);
}

/* ==========================================================
   LIGHT THEME
   ========================================================== */
:root.light {
    /* Surfaces */
    --bg: #fafaf9;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface2: #f5f5f4;
    --surface3: #e7e5e4;
    --surface4: #d6d3d1;

    /* Fills */
    --fill: rgba(0, 0, 0, 0.10);
    --fill-secondary: rgba(0, 0, 0, 0.05);
    --fill-tertiary: rgba(0, 0, 0, 0.025);
    --fill-quaternary: rgba(0, 0, 0, 0.012);

    /* Borders */
    --border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-hover: rgba(0, 0, 0, 0.12);
    --border-focus: var(--accent);
    --border-gradient: linear-gradient(135deg, rgba(190,55,52,0.25), rgba(190,55,52,0.15));

    /* Rouge DSD — accent primaire (assombri pour contraste sur fond clair) */
    --accent: #a52e2b;
    --accent-hover: #8c2623;
    --accent-light: #BE3734;
    --accent-lighter: #d4605d;
    --accent-muted: #8c2623;
    --accent-glow: rgba(165, 46, 43, 0.18);
    --accent-surface: rgba(165, 46, 43, 0.06);
    --accent-bg: rgba(165, 46, 43, 0.08);

    /* Patrimoine */
    --patrimoine: #a52e2b;
    --patrimoine-hover: #8c2623;
    --patrimoine-light: #BE3734;
    --patrimoine-glow: rgba(165, 46, 43, 0.18);
    --patrimoine-surface: rgba(165, 46, 43, 0.05);

    /* Text */
    --text: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #a8a29e;
    --text-faint: #d6d3d1;
    --text-inverse: #fafaf9;
    --text-on-accent: #ffffff;
    --text-disabled: #d6d3d1;
    --text-placeholder: #a8a29e;

    /* Semantic — Success */
    --success: #16a34a;
    --success-light: #22c55e;
    --success-surface: rgba(22, 163, 74, 0.06);
    --success-border: rgba(22, 163, 74, 0.16);

    /* Semantic — Warning */
    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-surface: rgba(217, 119, 6, 0.06);
    --warning-border: rgba(217, 119, 6, 0.16);

    /* Semantic — Danger */
    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-hover: #b91c1c;
    --danger-surface: rgba(220, 38, 38, 0.05);
    --danger-border: rgba(220, 38, 38, 0.14);

    /* Semantic — Info */
    --info: #2563eb;
    --info-light: #3b82f6;
    --info-surface: rgba(37, 99, 235, 0.05);
    --info-border: rgba(37, 99, 235, 0.14);

    --surface-dark: #1c1917;

    /* Chat */
    --user-bg: rgba(165, 46, 43, 0.05);
    --assistant-bg: rgba(0, 0, 0, 0.01);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.03) inset, 0 20px 40px -8px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-glow);
    --shadow-focus-danger: 0 0 0 2px var(--bg), 0 0 0 4px rgba(220, 38, 38, 0.14);
}