/**
 * Design System ABC Cosmétique — tokens (design-system.html)
 * https://fonts.google.com (Inter 400/500)
 */
:root {
  /* — Design system (source) — */
  --accent: #078373;
  --accent-secondary: #0A9485;
  --accent-dark: #056B5E;
  --accent-light: #E6F5F2;
  --background: #FAFAFA;
  --card: #FFFFFF;
  --muted: #F1F5F9;
  --foreground: #0F172A;
  --muted-foreground: #64748B;
  --subtle: #94A3B8;
  --border: #E2E8F0;
  --success: #22C55E;
  --error: #F87171;
  --danger: #DC2626;
  --badge: #EF4444;
  --logout-bg: #FFF5F5;
  --logout-border: #FECACA;
  --black: #000000;

  /* — Alias Gescom (compatibilité pages existantes) — */
  --color-primary: var(--accent);
  --color-primary-deep: var(--accent-dark);
  --color-primary-soft: var(--accent-secondary);
  --color-primary-subtle: var(--accent-light);
  --color-primary-subtle-strong: var(--accent-light);

  --color-canvas: var(--card);
  --color-canvas-soft: var(--background);
  --color-canvas-night: var(--foreground);
  --color-canvas-night-soft: #272734;

  --color-hairline: var(--border);
  --color-hairline-strong: #CBD5E1;
  --color-hairline-cool: var(--muted);
  --color-hairline-cool-2: var(--muted);
  --color-hairline-cool-3: var(--border);

  --color-ink: var(--foreground);
  --color-ink-secondary: var(--foreground);
  --color-ink-mute: var(--muted-foreground);
  --color-ink-mute-2: var(--subtle);
  --color-ink-faint: var(--subtle);

  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  --color-success: var(--success);
  --color-error: var(--error);
  --color-danger: var(--danger);
  --color-badge: var(--badge);

  --color-overlay-scrim: rgba(15, 23, 42, 0.5);
  --color-shadow-soft: rgba(15, 23, 42, 0.08);
  --color-shadow-medium: rgba(15, 23, 42, 0.16);

  /* Accents complémentaires (pages spécifiques) */
  --color-accent-purple: #6b01c2;
  --color-accent-violet: #644fc1;
  --color-accent-yellow: #ffdb13;

  /* Alias legacy */
  --gescom-brand: var(--accent);
  --gescom-brand-hover: var(--accent-dark);
  --gescom-brand-soft: var(--accent-secondary);
  --gescom-ink: var(--foreground);
  --gescom-surface: var(--background);

  /* Typographie — Inter (substitut Circular) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace;

  --font-display-xxl-size: 64px;
  --font-display-xxl-lh: 1.1;
  --font-display-xxl-ls: -1.92px;

  --font-display-xl-size: 48px;
  --font-display-xl-lh: 1.1;
  --font-display-xl-ls: -1.44px;

  --font-display-lg-size: 36px;
  --font-display-lg-lh: 1.15;
  --font-display-lg-ls: -0.72px;

  --font-display-md-size: 28px;
  --font-display-md-lh: 1.2;
  --font-display-md-ls: -0.42px;

  --font-heading-lg-size: 22px;
  --font-heading-lg-lh: 1.2;

  --font-heading-md-size: 18px;
  --font-heading-md-lh: 1.4;

  --font-body-lg-size: 18px;
  --font-body-lg-lh: 1.55;

  --font-body-md-size: 16px;
  --font-body-md-lh: 1.5;

  --font-button-md-size: 14px;
  --font-button-md-lh: 1;

  --font-caption-size: 13px;
  --font-caption-lh: 1.45;

  --font-micro-size: 12px;
  --font-micro-lh: 1.45;

  --font-code-size: 14px;
  --font-code-lh: 1.5;

  --font-weight-display: 500;
  --font-weight-body: 400;

  /* Bootstrap — alignement primaire */
  --primary: var(--accent);
  --secondary: var(--muted-foreground);
  --dark: var(--foreground);
  --light: var(--background);
  --font-family-sans-serif: var(--font-sans);
  --font-family-monospace: var(--font-mono);
}

/* Base typographique */
html {
  font-size: var(--font-body-md-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-weight-body);
  line-height: var(--font-body-md-lh);
  color: var(--color-ink);
  background-color: var(--color-canvas-soft);
}

h1, .h1 {
  font-size: var(--font-display-lg-size);
  font-weight: var(--font-weight-display);
  line-height: var(--font-display-lg-lh);
  letter-spacing: var(--font-display-lg-ls);
  color: var(--color-ink);
}

h2, .h2 {
  font-size: var(--font-display-md-size);
  font-weight: var(--font-weight-display);
  line-height: var(--font-display-md-lh);
  letter-spacing: var(--font-display-md-ls);
  color: var(--color-ink);
}

h3, .h3 {
  font-size: var(--font-heading-lg-size);
  font-weight: var(--font-weight-display);
  line-height: var(--font-heading-lg-lh);
  letter-spacing: 0;
  color: var(--color-ink);
}

h4, .h4,
h5, .h5 {
  font-size: var(--font-heading-md-size);
  font-weight: var(--font-weight-display);
  line-height: var(--font-heading-md-lh);
  color: var(--color-ink);
}

h6, .h6 {
  font-size: var(--font-caption-size);
  font-weight: var(--font-weight-display);
  line-height: var(--font-caption-lh);
  color: var(--color-ink-secondary);
}

.lead {
  font-size: var(--font-body-lg-size);
  line-height: var(--font-body-lg-lh);
  color: var(--color-ink-secondary);
}

small,
.text-muted {
  color: var(--color-ink-mute) !important;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--font-code-size);
  line-height: var(--font-code-lh);
}

pre {
  background-color: var(--color-canvas-night);
  color: var(--color-on-dark);
}

@media (max-width: 767px) {
  h1, .h1 {
    font-size: var(--font-display-md-size);
    letter-spacing: var(--font-display-md-ls);
  }
}