@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import "tailwindcss";

@source "../..";

/* Couleurs des catégories du lexique, construites dynamiquement en PHP (bg-<?= $color ?>) */
@source inline("bg-navy bg-role-action bg-coral bg-yellow bg-violet bg-green bg-primary bg-destructive bg-role-guide bg-role-ai bg-gold bg-role-verified");

/* Couleurs des catégories de guides, construites dynamiquement en PHP (bg-<?= $color ?>, bg-<?= $soft ?>, text-<?= $color ?>) */
@source inline("bg-primary-light text-primary bg-role-verified-soft text-role-verified bg-role-ai-soft text-role-ai bg-yellow-light text-yellow bg-violet-light text-violet bg-gold-soft text-gold bg-role-action-soft text-role-action bg-coral-soft text-coral");

/* Couleurs des domaines de collectifs, construites dynamiquement en PHP (bg-<?= $color ?>, bg-<?= $soft ?>, text-<?= $color ?>) — toutes les couleurs sélectionnables dans Collectifs → Domaines (CollectifController::COLOR_CHOICES) */
@source inline("bg-role-guide-soft text-role-guide bg-green-light text-green");
@source inline("text-role-verified/60 text-primary/60 text-role-ai/60 text-role-action/60 text-role-guide/60 text-gold/60 text-violet/60 text-yellow/60 text-coral/60 text-green/60");
@source inline("ring-role-action/25 bg-foreground/[0.05]");
@source inline("border-role-verified/20 border-primary/20 border-role-ai/20 border-role-action/20 border-role-guide/20 border-gold/20 border-violet/20 border-yellow/20 border-coral/20 border-green/20");

@theme {
    --font-sans: "Inter", system-ui, sans-serif;
    --font-serif: "Poppins", system-ui, sans-serif;

    --radius: 1.375rem;
    --primary-rose: #3267e3;
    --color-primary-rose: #3267e3;
    --primary-orange: #e8866a;
    --color-primary-orange: #e8866a;
    --primary-dark: #13182a;
    --color-primary-dark: #13182a;
    --background: #f7faff;
    --color-background: #f7faff;
    --color-bg-soft: #eef5ff;
    --section-tint: #f6f9ff;
    --color-section-tint: #f6f9ff;
    --foreground: #13182a;
    --color-foreground: #13182a;
    --color-card: #fff;
    --card-foreground: #13182a;
    --popover: #fff;
    --color-popover: #fff;
    --popover-foreground: #13182a;
    --color-popover-foreground: #13182a;
    --primary: #3267e3;
    --color-primary: #3267e3;
    --color-primary: #3267e3;
    --primary-foreground: #fff;
    --color-primary-foreground: #fff;
    --primary-hover: #2554c7;
    --color-primary-hover: #2554c7;
    --primary-deep: #0b2a66;
    --color-primary-deep: #0b2a66;
    --primary-light: #eef5ff;
    --color-primary-light: #eef5ff;
    --navy: #0b2a66;
    --color-navy: #0b2a66;
    --navy-light: #123a7a;
    --color-navy-light: #123a7a;
    --secondary: #f4f7ff;
    --color-secondary: #f4f7ff;
    --secondary-foreground: #13182a;
    --color-secondary-foreground: #13182a;
    --color-muted: #f4f7ff;
    --color-color-muted: #f4f7ff;
    --muted-foreground: #5b6478;
    --color-muted-foreground: #5b6478;
    --accent: #e8866a;
    --color-accent: #e8866a;
    --accent-foreground: #fff;
    --color-accent-foreground: #fff;
    --coral: #e8866a;
    --color-coral: #e8866a;
    --coral-soft: #fbe5dd;
    --color-coral-soft: #fbe5dd;
    --destructive: #e11d48;
    --color-destructive: #e11d48;
    --destructive-foreground: #fff;
    --color-destructive-foreground: #fff;
    --success: var(--color-success-green);
    --color-success: var(--color-success-green);
    --warning: var(--color-warning-amber);
    --color-warning: var(--color-warning-amber);
    --gold: #c4a66b;
    --color-gold: #c4a66b;
    --color-gold-soft: #f6f0e3;
    --violet: #7c4fe0;    
    --color-violet: #7c4fe0;
    --violet-light: #ede6ff;
    --color-violet-light: #ede6ff;
    --violet-foreground: #fff;
    --color-violet-foreground: #fff;
    --green: #16a34a;
    --color-green: #16a34a;
    --green-light: #dcfce7;
    --color-green-light: #dcfce7;
    --green-foreground: #fff;
    --green-foreground: #fff;
    --yellow: #eab308;
    --color-yellow: #eab308;
    --yellow-light: #fef3c7;
    --color-yellow-light: #fef3c7;
    --yellow-foreground: #13182a;
    --color-yellow-foreground: #13182a;
    --color-role-verified: #10b981;
    --color-role-verified-soft: #e7f8f0;
    --color-role-action: #f59e0b;
    --color-role-action-soft: #fef3dc;
    --role-ai: #8b5cf6;
    --color-role-ai: #8b5cf6;
    --color-role-ai-soft: #f1ecfe;
    --color-role-guide: #0ea5e9;
    --color-role-guide-soft: #e2f4fe;
    --border: #dbe7ff;
    --color-border: #dbe7ff;
    --border-soft: #e6eeff;
    --color-border-soft: #e6eeff;
    --border-strong: #b9cdf2;
    --color-border-strong: #b9cdf2;
    --color-input: #dbe7ff;
    --bg-input: #fff;
    --color-bg-input: #fff;
    --ring: #3267e3;
    --color-ring: #3267e3;
    --text-tertiary: #9aa1b2;
    --color-text-tertiary: #9aa1b2;
    --text-disabled: #cbd5e1;
    --color-text-disabled: #cbd5e1;
    --gradient-primary: linear-gradient(180deg, #3267e3 0%, #2742a0 100%);
    --color-gradient-primary: linear-gradient(180deg, #3267e3 0%, #2742a0 100%);
    --gradient-accent: linear-gradient(135deg, #e8866a 0%, #d96f51 100%);
    --color-gradient-accent: linear-gradient(135deg, #e8866a 0%, #d96f51 100%);
    --gradient-soft: linear-gradient(135deg, #3267e314 0%, #3267e30a 100%);
    --color-gradient-soft: linear-gradient(135deg, #3267e314 0%, #3267e30a 100%);
    --gradient-dark: linear-gradient(180deg, #0e0f17 0%, #12131c 100%);
    --color-gradient-dark: linear-gradient(180deg, #0e0f17 0%, #12131c 100%);
    --gradient-brand: linear-gradient(135deg, #3267e3 0%, #6450b8 55%, #e8866a 100%);
    --color-gradient-brand: linear-gradient(135deg, #3267e3 0%, #6450b8 55%, #e8866a 100%);
    --gradient-search: linear-gradient(135deg, #eef2fe 0%, #e0ddf7 100%);
    --color-gradient-search: linear-gradient(135deg, #eef2fe 0%, #e0ddf7 100%);
    --gradient-app-bg: var(--background);
    --color-gradient-app-bg: var(--background);
    --shadow-card: var(--mj-shadow-soft);
    --color-shadow-card: var(--mj-shadow-soft);
    --shadow-elevated: var(--mj-shadow-floating);
    --color-shadow-elevated: var(--mj-shadow-floating);
    --shadow-primary: 0 8px 24px #3267e338;
    --color-shadow-primary: 0 8px 24px #3267e338;
    --shadow-primary-lg: 0 12px 36px #3267e34d;
    --color-shadow-primary-lg: 0 12px 36px #3267e34d;
    --shadow-primary-hover: 0 14px 36px #3267e361;
    --color-shadow-primary-hover: 0 14px 36px #3267e361;
    --glow-primary: 0 0 0 1px #3267e340, 0 0 24px #3267e340;
    --color-glow-primary: 0 0 0 1px #3267e340, 0 0 24px #3267e340;
    --glow-accent: 0 0 0 1px #e8866a4d, 0 0 24px #e8866a4d;
    --color-glow-accent: 0 0 0 1px #e8866a4d, 0 0 24px #e8866a4d;
    --shadow-glow-brand: 0 0 24px 0 #3267e31f;
    --color-shadow-glow-brand: 0 0 24px 0 #3267e31f;
    --shadow-glow-brand-strong: 0 4px 20px 0 #3267e338;
    --color-shadow-glow-brand-strong: 0 4px 20px 0 #3267e338;
    --shadow-card-hover: var(--mj-shadow-card);
    --color-shadow-card-hover: var(--mj-shadow-card);
    --brand-soft: #3267e314;
    --color-brand-soft: #3267e314;
    --brand-glow: #3267e32e;
    --color-brand-glow: #3267e32e;
    --chip-bg: #3267e31a;
    --color-chip-bg: #3267e31a;
    --chip-fg: #2742a0;
    --color-chip-fg: #2742a0;
    --ig-text: #13182a;
    --color-ig-text: #13182a;
    --ig-text-secondary: #5b6478;
    --color-ig-text-secondary: #5b6478;
    --ig-border: #13182a14;
    --color-ig-border: #13182a14;
    --ig-bg-soft: #f4f7ff;
    --color-ig-bg-soft: #f4f7ff;
    --mj-bg: #f7faff;
    --color-mj-bg: #f7faff;
    --mj-bg-soft: #eef5ff;
    --mj-surface: #fff;
    --color-mj-surface: #fff;
    --mj-surface-strong: #fff;
    --color-mj-surface-strong: #fff;
    --mj-border: #dbe7ff;
    --color-mj-border: #dbe7ff;
    --mj-text: #13182a;
    --color-mj-text: #13182a;
    --mj-muted: #5b6478;
    --color-mj-muted: #5b6478;
    --mj-blue: #3267e3;
    --color-mj-blue: #3267e3;
    --mj-blue-soft: #eef5ff;
    --color-mj-blue-soft: #eef5ff;
    --mj-blue-tint: #d6dffb;
    --color-mj-blue-tint: #d6dffb;
    --mj-blue-glow: #3267e329;
    --color-mj-blue-glow: #3267e329;
    --mj-coral: #ff7a61;
    --color-mj-coral: #ff7a61;
    --mj-coral-soft: #fff0ec;
    --color-mj-coral-soft: #fff0ec;
    --mj-coral-glow: #ff7a612e;
    --color-mj-coral-glow: #ff7a612e;
    --mj-violet: #7c3aed;
    --color-mj-violet: #7c3aed;
    --mj-violet-soft: #f5f0ff;
    --color-mj-violet-soft: #f5f0ff;
    --mj-green: #22c55e;
    --color-mj-green: #22c55e;
    --mj-green-soft: #ecfdf3;
    --color-mj-green-soft: #ecfdf3;
    --mj-yellow: #fbbf24;
    --color-mj-yellow: #fbbf24;
    --mj-yellow-soft: #fffbeb;
    --color-mj-yellow-soft: #fffbeb;
    --mj-gold: #c4a66b;
    --color-mj-gold: #c4a66b;
    --mj-gold-soft: #f6f0e3;
    --color-mj-gold-soft: #f6f0e3;
    --mj-shadow-soft: 0 10px 30px #0b2a6614;
    --color-mj-shadow-soft: 0 10px 30px #0b2a6614;
    --mj-shadow-card: 0 6px 20px #0b2a660f, 0 20px 50px #0b2a661f;
    --color-mj-shadow-card: 0 6px 20px #0b2a660f, 0 20px 50px #0b2a661f;
    --mj-shadow-floating: 0 20px 50px #0b2a661f, 0 40px 80px #0b2a6624;
    --color-mj-shadow-floating: 0 20px 50px #0b2a661f, 0 40px 80px #0b2a6624;
    --shadow-soft: var(--mj-shadow-soft);
    --color-shadow-soft: var(--mj-shadow-soft);
    --shadow-premium: var(--mj-shadow-card);
    --color-shadow-premium: var(--mj-shadow-card);
    --shadow-button: 0 12px 26px #3267e347;
    --color-shadow-button: 0 12px 26px #3267e347;
}

body {
    font-family: var(--font-sans);
}

* {
    box-sizing: border-box;
}

.text-gradient-brand {
    background-image: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
}

.mj-hero-dark {
    background-image: linear-gradient(150deg,#061a3a,#0a2756 48%,#123a86);
}

.mj-halo {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(40px);
}

.mj-halo-violet {
    background: radial-gradient(circle,#8b5cf626,#0000 70%);
}

.mj-halo-blue {
    background: radial-gradient(circle,#3267e326,#0000 70%);
}

.mj-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 12.5px;
    font-weight: 700;
    background-color: var(--primary-light);
    color: var(--primary);
}

.mj-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 1024px) {
    .mj-container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.mj-text-muted {
    color: var(--muted-foreground);
}

.mj-heading-lg {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--primary-deep);
    line-height: 1.15;
}

.mj-card-premium {
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #e3e9fb;
    box-shadow: 0 12px 40px rgba(11, 42, 102, 0.1);
}