@layer reset, framework, theme, components, overrides;

/* ===== 1) RESET ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin: 0 0 0.5em; }
}

/* ===== 2) THEME TOKENS ===== */
@layer theme {
  :root {
    /* typo */
    --font-family-base: 'CMU Roman', serif;
    --font-family-heading: 'CMU Roman', serif;
    --font-family-ui: 'CMU Roman', serif;
    --font-size-root: 16px;

    /* Couleurs de base */
    --color-bg: #f7f8fa;        /* Fond général de la page (body, sections principales) */
    --color-surface: #f7f8fa;   /* Surfaces en relief : cartes, modales, panneaux */
    --color-border: #fffafb;    /* Bordures, séparateurs, lignes de tableau */
    --color-text: #1c1d21;      /* Texte principal (haute lisibilité) */
    --color-muted: #c3baba;     /* Texte secondaire, labels, placeholders, infos discrètes */

    /* Couleurs d’accent (actions / mise en avant) */
    --color-accent: #0081af;          /* Accent fort : boutons principaux, liens actifs */
    --color-accent-contrast: #ac7b7d; /* Texte posé sur accent (contraste élevé, lisibilité) */
    --color-accent-weak: #119da4;     /* Accent faible : hover, badges, survols doux */
    --color-accent-weaker: #748b75;

    /* États (feedback utilisateur) */
    --color-success: #22c55e;   /* Succès : validation, confirmation positive */
    --color-warning: #f59e0b;   /* Attention : avertissement, précaution */
    --color-danger: #ef4444;    /* Erreur / danger : actions destructives, alertes */

    /* rayons/ombre/espaces */
    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 0 4px 16px rgba(0,0,0,.06);

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;

    --container: 980px;

    /* échelle typo */
    --fs-xs: .85rem; --fs-sm: .95rem; --fs-base: 1rem;
    --fs-h6: .95rem; --fs-h5: 1.05rem; --fs-h4: 1.2rem;
    --fs-h3: 1.4rem; --fs-h2: 1.8rem;  --fs-h1: 2.2rem;
  }

  /* thème sombre opt-in via data-theme="dark" */
  [data-theme="dark"] {
    --color-bg: #0b0f14;
    --color-surface: #121821;
    --color-border: #223042;
    --color-text: #e5e7eb;
    --color-muted: #94a3b8;

    --color-accent: #4fb4d3;
    --color-accent-contrast: #0b0f14;
    --color-accent-weak: #2a6d80;

    --shadow: 0 4px 12px rgba(0,0,0,.15);
  }

  /* base page */
  html { font-size: var(--font-size-root); }
  body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background: var(--color-bg);
  }
}

/* ===== 3) FRAMEWORK (grid/utilitaires) ===== */
@layer framework {
  .container { max-width: var(--container); margin-inline:auto; padding-inline:var(--space-4); }
  .row { display:flex; flex-wrap:wrap; margin-left:-1rem; margin-right:-1rem; }
  .col { flex:1 1 100%; padding-left:1rem; padding-right:1rem; }
  [class*="col-"] { flex:0 0 auto; }
  .col-50{width:50%} .col-100{width:100%}
}