/*
 * brand.css — Doteo Design System
 * Source of truth for all CSS custom properties.
 * Import in every HTML page; never duplicate :root definitions.
 *
 * Reference: public/index.html (homepage is the canonical palette)
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Base reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Brand tokens ── */
:root {
  /* Palette navy */
  --navy:        #1e3a5f;
  --navy-dark:   #142a47;
  --navy-mid:    #2a4d73;

  /* Palette green (primary CTA) */
  --green:       #2d8a4e;
  --green-light: #e8f5ee;
  --green-dark:  #1e6236;

  /* Neutrals */
  --white:       #ffffff;
  --bg-light:    #f4f6f9;
  --bg-alt:      #eef2f7;

  /* Text */
  --text:        #1a2537;
  --text-2:      #374558;
  --text-3:      #6b7a8d;

  /* UI */
  --border:      #dde3eb;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.10);

  /* Contextual — keep as-is (not replaced by green) */
  --red:         #dc2626;
  --red-light:   #fef2f2;
  --amber:       #d97706;
  --amber-bg:    #fffbeb;
  --gold:        #c8901a;
  --gold-light:  rgba(200,144,26,0.12);

  /* Shared component vars (used by dashboard + formulaire modals) */
  --surface:     #ffffff;
  --bg:          #f4f6f9;
  --radius:      12px;
  --radius-sm:   8px;
}

/* ── Base typography ── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Logo component (shared across nav bars) ── */
.logo-mark {
  width: 32px;
  height: 32px;
  background: var(--green);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
}