/*
 * Projet          : MageKorp Hub
 * Fichier         : public/assets/css/base.css
 * Rôle            : Reset, base typographique et utilitaires
 * Auteur          : Régis KREMER
 * Version fichier : 1.0.0
 * Version générale: 0.2.0
 * Lot             : MAGEKORP HUB DESIGN SYSTEM RESPONSIVE1
 * Base requise    : MageKorp Hub 0.1.0
 * Créé le         : 2026-07-23
 * Modifié le      : 2026-07-23
 * Contraintes     : CSP stricte, responsive, accessibilité WCAG 2.2 AA
 */
@layer reset, base, utilities;
@layer reset {
  *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body,h1,h2,h3,p,ul,ol,figure{margin:0} ul,ol{padding:0} img{display:block;max-width:100%} button,input,textarea,select{font:inherit} button{border:0} a{color:inherit} [hidden]{display:none!important}
}
@layer base {
  html{font-family:var(--font-sans);background:var(--surface-page);color:var(--text);text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
  body{min-width:20rem;min-height:100vh;overflow-x:clip;background:var(--surface-page);font-size:var(--type-md);line-height:var(--line-body)}
  ::selection{background:var(--selection)}
  h1,h2,h3{color:var(--text-strong);line-height:var(--line-heading);letter-spacing:-.025em;text-wrap:balance}
  h1{font-size:var(--type-display)} h2{font-size:var(--type-xl)} h3{font-size:var(--type-lg)}
  p{max-width:72ch} small{font-size:var(--type-xs)}
  a{text-decoration-thickness:.08em;text-underline-offset:.18em}
  button,a,input,select,textarea{outline-color:var(--focus)}
  :focus:not(:focus-visible){outline:none}
  :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  input,select,textarea{min-height:2.75rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--text-strong);padding:.68rem .8rem}
  label{display:block;color:var(--text-strong);font-size:var(--type-sm);font-weight:700;margin-block-end:.4rem}
  code{font-family:var(--font-mono);font-size:.88em}
}
@layer utilities {
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .skip-link{position:fixed;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:999;background:var(--neutral-0);color:#07172a;padding:.7rem 1rem;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);transform:translateY(-180%);transition:transform var(--duration) var(--ease)}
  .skip-link:focus{transform:none}
  .content-container{width:min(var(--content),calc(100% - 2rem));margin-inline:auto}
  .eyebrow{font-size:var(--type-xs);font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--orange-500)}
  .eyebrow--blue{color:var(--action-primary)}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors: active){*:focus-visible{outline:3px solid CanvasText}.button,.icon-button,.badge,.admin-nav-item{border:1px solid ButtonText}}

@layer base {
  [id]{scroll-margin-top:6rem}
  a,button,input,select,textarea,summary{touch-action:manipulation}
  summary{min-height:2.75rem;display:flex;align-items:center}
  input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 22%,transparent)}
}
@media (prefers-contrast: more){:root{--border:#65758a;--border-strong:#3d4d61}a{text-decoration-thickness:.14em}.button{border-width:2px}}