/*
 * app.css — Chronique des Mondes
 * Point d'entrée principal — importe tous les modules CSS.
 * Chargé après variables.css et themes/themes.css depuis App.razor.
 * IMPORTANT: @import rules must come first (CSS spec requirement).
 */

/* ============================================
   IMPORTS MODULES (must be first)
   ============================================ */
@import url('layouts/layout-shell.css');
@import url('layouts/auth-layout.css');
@import url('components/components.css');
@import url('components/toasts.css');

/* ============================================
   ACCESSIBILITE – RGAA
   ============================================ */

/* Lien d'évitement (RGAA 12.7 / WCAG 2.4.1) */
.skip-to-content {
    position: absolute;
    top: -48px;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 20px;
    z-index: 10000;
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: 0 0 6px 0;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
  color: var(--color-text-primary);
}

a {
  color: var(--color-primary-light);
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

button, input, select, textarea {
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   OVERRIDES FLUENT UI
   Aligne les couleurs Fluent sur notre design system
   ============================================ */
fluent-design-system-provider,
.fluent-design-system {
  --accent-fill-rest: var(--color-primary);
  --accent-fill-hover: var(--color-primary-hover);
  --neutral-fill-rest: var(--color-bg-card);
  --neutral-fill-hover: var(--color-bg-elevated);
  --neutral-foreground-rest: var(--color-text-primary);
}