/* =============================================================
   Abricot Formation — Design Tokens v1.0
   Centre de formation Qualiopi · Colombes (92) · depuis 2000
   ============================================================= */

:root {
  /* ---------- COLOR ----------------------------------------- */
  /* Brand */
  --color-abricot:        #FF6600; /* signature accent — CTA, badges dispo, underlines */
  --color-abricot-hover:  #E25600; /* hover/active state on accent */
  --color-abricot-soft:   #FFF1E6; /* tinted background (chips, highlights) */
  --color-abricot-line:   #FFC9A3; /* faint accent line on cream */

  /* Ink — neutres dérivés du noir */
  --color-ink:            #111111; /* titles, header/footer, primary text */
  --color-ink-700:        #2A2C33; /* secondary headings */
  --color-ink-500:        #6D7081; /* meta, captions, helper text */
  --color-ink-300:        #B5B7C0; /* placeholders, disabled */
  --color-ink-100:        #E6E6EA; /* borders, dividers */
  --color-ink-50:         #F2F2F5; /* hover surfaces */

  /* Surfaces */
  --color-paper:          #FFFFFF; /* primary background */
  --color-paper-alt:      #F7F7FB; /* soft surface, alternate sections */
  --color-paper-warm:     #FDFBF8; /* very subtle warm tint */

  /* Semantic — exprimés sans bleu/vert/rouge */
  --color-dispo:          var(--color-abricot);    /* pastille orange = places dispo */
  --color-complet:        var(--color-ink-500);    /* gris barré = complet */
  --color-focus:          var(--color-abricot);    /* outline focus = orange */

  /* ---------- TYPOGRAPHY ------------------------------------ */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modular ratio ~1.25 around 16px base */
  --text-xs:      12px;   /* meta, legal */
  --text-sm:      14px;   /* caption, label, badge */
  --text-base:    16px;   /* body */
  --text-md:      18px;   /* lead body */
  --text-lg:      20px;   /* large body, intro */
  --text-xl:      24px;   /* H3 */
  --text-2xl:     32px;   /* H2 */
  --text-3xl:     44px;   /* H1 */
  --text-4xl:     60px;   /* display M */
  --text-5xl:     80px;   /* display L (hero) */
  --text-6xl:     112px;  /* display XL */

  /* Line-heights */
  --lh-display:   0.96;
  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  /* Letter-spacing */
  --track-display:  -0.025em; /* hero, H1 */
  --track-h:        -0.015em; /* H2/H3 */
  --track-body:     -0.005em;
  --track-label:     0.04em;  /* eyebrow, badge, nav label */

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ---------- SPACING --------------------------------------- */
  /* Base 8px scale */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   160px;

  /* ---------- RADIUS ---------------------------------------- */
  --radius-none:   0;
  --radius-xs:     4px;   /* inputs, small buttons */
  --radius-sm:     8px;   /* buttons, badges niveau */
  --radius-md:     12px;  /* cards */
  --radius-lg:     16px;  /* large cards, modals */
  --radius-pill:   999px; /* status pills, chips dispo */

  /* ---------- BORDERS --------------------------------------- */
  --border-hairline:  1px solid var(--color-ink-100);
  --border-strong:    1px solid var(--color-ink);
  --border-accent:    1px solid var(--color-abricot);

  /* ---------- SHADOWS (parcimonieuses) --------------------- */
  --shadow-none:    none;
  --shadow-card:    0 1px 2px rgba(17, 17, 17, 0.04),
                    0 8px 24px -12px rgba(17, 17, 17, 0.10);
  --shadow-elevated:0 4px 8px rgba(17, 17, 17, 0.06),
                    0 24px 48px -16px rgba(17, 17, 17, 0.18);
  --shadow-focus:   0 0 0 3px rgba(255, 102, 0, 0.28);

  /* ---------- MOTION ---------------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --ease-out:   cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- LAYOUT ---------------------------------------- */
  --container-max:   1240px;
  --container-pad:   24px;
  --grid-gutter:     24px;

  /* ---------- FOCUS ----------------------------------------- */
  --focus-ring:      0 0 0 2px var(--color-paper),
                     0 0 0 4px var(--color-abricot);
}

/* =============================================================
   Reset & base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-h);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--color-abricot);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-abricot);
  color: var(--color-paper);
}