/* =============================================================
   LOOTY DESIGN SYSTEM — Colors & Type tokens
   Brand: Looty par LiteSoft
   Sector: GMAO / maintenance industrielle (froid, génie clim., ESP, électrique)
   Tone: sérieux corporate B2B + touche de légèreté
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Brand display font: Bricolage Grotesque (Google Fonts).
   A contemporary grotesque with subtly rounded terminals.
   Evokes craftsmanship ("bricolage" = workshop) — fits maintenance industry,
   while keeping the modern, light feel. Optical-size axis enabled. */

:root {
  /* ---------- BRAND ---------- */
  --brand-blue: #1D82C5;          /* Looty primary blue (logo) */
  --brand-blue-700: #146399;
  --brand-blue-800: #0E4D78;
  --brand-blue-300: #6FB1DA;
  --brand-blue-100: #D5EAF6;
  --brand-blue-50:  #EEF6FB;

  --brand-gray: #4F4E4E;          /* Looty secondary gray (logo wing) */
  --brand-gray-800: #2E2D2D;
  --brand-gray-600: #6B6B6B;
  --brand-gray-300: #BFBFBF;

  /* ---------- ACCENTS (sober, used sparingly) ---------- */
  --accent-amber: #E89A2D;        /* warnings, en cours */
  --accent-emerald: #16A570;      /* success, conforme */
  --accent-coral:  #E2533F;       /* errors, non-conforme, urgent */

  /* ---------- NEUTRALS (warm gray scale) ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFAF9;
  --n-50:  #F6F5F2;
  --n-100: #ECEAE5;
  --n-200: #DCD9D3;
  --n-300: #C2BEB6;
  --n-400: #9A958D;
  --n-500: #75716B;
  --n-600: #555149;
  --n-700: #3B3833;
  --n-800: #25231F;
  --n-900: #15140F;

  /* ---------- SEMANTIC: SURFACES & TEXT ---------- */
  --bg:           var(--n-25);     /* app background */
  --surface:      var(--n-0);      /* cards */
  --surface-2:    var(--n-50);     /* subtle nested */
  --surface-3:    var(--n-100);    /* hover, divider bg */
  --surface-inverse: var(--brand-gray-800);

  --fg1: var(--n-900);             /* primary text */
  --fg2: var(--n-700);             /* secondary text */
  --fg3: var(--n-500);             /* muted, captions */
  --fg4: var(--n-400);             /* disabled, hints */
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--brand-blue-700);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-focus:  var(--brand-blue);

  /* ---------- SEMANTIC: STATUS ---------- */
  --status-info-bg:    var(--brand-blue-50);
  --status-info-fg:    var(--brand-blue-800);
  --status-success-bg: #E5F4ED;
  --status-success-fg: #0B7A52;
  --status-warning-bg: #FBEFD9;
  --status-warning-fg: #8A5A0B;
  --status-danger-bg:  #FAE5E1;
  --status-danger-fg:  #A8311F;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif; /* Editorial display */
  --font-brand: "Bricolage Grotesque", "Public Sans", sans-serif;       /* Hero brand stamps & accents only — never body */

  /* ---------- TYPE SCALE (1.125 minor third) ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.06em;

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII (light, pro corporate) ---------- */
  --r-xs: 3px;
  --r-sm: 4px;       /* default for inputs */
  --r-md: 6px;       /* default for buttons, cards */
  --r-lg: 10px;      /* large cards, modals */
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 25, 35, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.05), 0 1px 3px rgba(20, 25, 35, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(20, 25, 35, 0.06), 0 2px 4px -1px rgba(20, 25, 35, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(20, 25, 35, 0.10), 0 4px 8px -2px rgba(20, 25, 35, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(20, 25, 35, 0.18);
  --shadow-focus: 0 0 0 3px rgba(29, 130, 197, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Use as utility classes OR mixins for components.
   ============================================================= */

.t-display-1, h1.display {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, var(--fs-6xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h1, h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.t-h2, h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.t-h3, h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.t-h4, h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.t-lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg2);
}
.t-body, p {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg1);
}
.t-body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg2);
}
.t-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--fg3);
}
.t-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-blue-700);
}
.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* =============================================================
   BASE RESET (light, opt-in)
   ============================================================= */
.looty-base {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}