/**
 * Supabaze design tokens — couleurs & typographie uniquement
 * https://fonts.google.com (Inter 400/500)
 */
:root {
  /* Brand & accent — vert ABC */
  --color-primary: #03904a;
  --color-primary-deep: #027a3f;
  --color-primary-soft: #0cad5a;
  --color-accent-purple: #6b01c2;
  --color-accent-violet: #644fc1;
  --color-accent-yellow: #ffdb13;

  /* Surfaces */
  --color-canvas: #ffffff;
  --color-canvas-soft: #fafafa;
  --color-canvas-night: #1c1c1c;
  --color-canvas-night-soft: #202020;
  --color-hairline: #dfdfdf;
  --color-hairline-strong: #c7c7c7;
  --color-hairline-cool: #ededed;
  --color-hairline-cool-2: #efefef;
  --color-hairline-cool-3: #d4d4d4;

  /* Texte */
  --color-ink: #171717;
  --color-ink-secondary: #212121;
  --color-ink-mute: #707070;
  --color-ink-mute-2: #9a9a9a;
  --color-ink-faint: #b2b2b2;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* Alias legacy (pages avec anciennes couleurs ABC) */
  --gescom-brand: var(--color-primary);
  --gescom-brand-hover: var(--color-primary-deep);
  --gescom-brand-soft: var(--color-primary-soft);
  --gescom-ink: var(--color-ink);
  --gescom-surface: var(--color-canvas-soft);

  /* Typographie — Inter (substitut Circular) */
  --font-sans: 'Inter', '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(--color-primary);
  --secondary: var(--color-ink-mute);
  --success: var(--color-primary);
  --dark: var(--color-canvas-night);
  --light: var(--color-canvas-soft);
  --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);
  }
}