/* =====================================================================
   ALBER.PRO — Design tokens & base styles
   Brand book stylesheet. Tokens are stable contracts; element styles
   reflect those tokens. Consume `var(--…)` everywhere downstream.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

:root {
  /* ── Brand colors ─────────────────────────────────────────────── */
  --alber-navy-900: #07173A;
  --alber-navy-800: #0A1F44;   /* primary */
  --alber-navy-700: #122E63;
  --alber-navy-600: #1B4187;
  --alber-navy-500: #2E5BAF;
  --alber-navy-400: #4F7AC9;
  --alber-navy-300: #8AA8DE;
  --alber-navy-200: #B8CCE8;
  --alber-navy-100: #DCE6F4;
  --alber-navy-50:  #F0F5FB;

  --alber-orange-700: #C4441A;
  --alber-orange-600: #E5521A;   /* hover */
  --alber-orange-500: #FF6B2C;   /* primary CTA, accent */
  --alber-orange-400: #FF8956;
  --alber-orange-300: #FFB28C;
  --alber-orange-200: #FFD0B8;
  --alber-orange-100: #FFE3D2;
  --alber-orange-50:  #FFF4ED;

  --alber-aqua-700: #006A82;
  --alber-aqua-600: #008CA8;
  --alber-aqua-500: #00B8D9;     /* eau / détection */
  --alber-aqua-400: #4DD2EC;
  --alber-aqua-200: #B2EAF5;
  --alber-aqua-100: #D2F2FA;
  --alber-aqua-50:  #E8F8FC;

  --alber-cream:   #FFF8F1;       /* warm background, soft */
  --alber-ink:     #0A1424;       /* texte principal */
  --alber-paper:   #FFFFFF;

  /* Neutral / gray scale */
  --gray-900: #0F1623;
  --gray-800: #1E2638;
  --gray-700: #3A4256;
  --gray-600: #5B6478;
  --gray-500: #7E8699;
  --gray-400: #A6ADBF;
  --gray-300: #C9CED9;
  --gray-200: #E2E6ED;
  --gray-100: #F0F2F6;
  --gray-50:  #F7F8FA;

  /* Semantic */
  --success-500: #16A34A;
  --success-50:  #DCFCE7;
  --warning-500: #F59E0B;
  --warning-50:  #FEF3C7;
  --danger-500:  #DC2626;
  --danger-50:   #FEE2E2;
  --info-500:    #2563EB;
  --info-50:     #DBEAFE;

  /* ── Surfaces & semantic aliases ─────────────────────────────── */
  --bg-page:    var(--alber-cream);
  --bg-paper:   var(--alber-paper);
  --bg-inverse: var(--alber-navy-800);
  --bg-tint:    var(--alber-navy-50);
  --bg-warm:    var(--alber-orange-50);

  --fg-1: var(--alber-ink);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-inverse: var(--alber-paper);
  --fg-brand: var(--alber-orange-500);
  --fg-deep:  var(--alber-navy-800);

  --border-1: var(--gray-200);
  --border-2: var(--gray-300);
  --border-strong: var(--alber-navy-800);
  --border-brand:  var(--alber-orange-500);

  /* ── Typography ──────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-icon:    'Material Symbols Rounded';

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

  /* Display scale (Bricolage) */
  --display-3xl: clamp(64px, 8.5vw, 128px);
  --display-2xl: clamp(48px, 6vw, 88px);
  --display-xl:  clamp(40px, 4.5vw, 64px);
  --display-l:   clamp(32px, 3.4vw, 48px);
  --display-m:   clamp(26px, 2.6vw, 36px);
  --display-s:   24px;
  --display-xs:  20px;

  /* Body scale (DM Sans) */
  --text-xl: 20px;
  --text-l:  18px;
  --text-m:  16px;
  --text-s:  14px;
  --text-xs: 12px;

  /* Line-heights */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ── Spacing scale ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --page-gutter: clamp(20px, 4vw, 64px);
  --sidebar-w:   280px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-6: 32px;
  --radius-pill: 9999px;

  /* ── Shadows (warm-tinted, soft) ─────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(10,31,68,.06);
  --shadow-2: 0 2px 6px rgba(10,31,68,.08), 0 1px 2px rgba(10,31,68,.04);
  --shadow-3: 0 6px 16px rgba(10,31,68,.10), 0 2px 4px rgba(10,31,68,.05);
  --shadow-4: 0 12px 28px rgba(10,31,68,.14), 0 4px 8px rgba(10,31,68,.06);
  --shadow-5: 0 24px 48px rgba(10,31,68,.18), 0 8px 16px rgba(10,31,68,.08);
  --shadow-brand: 0 12px 32px rgba(255,107,44,.32);
  --shadow-aqua:  0 8px 24px rgba(0,184,217,.28);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ===================================================================
   BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; }

/* Display utility */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-deep);
}
.mono { font-family: var(--font-mono); }

/* Material icon */
.msr {
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.msr--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.msr--light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.msr--bold  { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* =====================================================================
   BRAND BOOK SHELL
   ===================================================================== */
.bb {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
@media (max-width: 900px) {
  .bb { grid-template-columns: 1fr; }
}

.bb__sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--alber-navy-900);
  color: var(--fg-inverse);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px) { .bb__sidebar { position: static; height: auto; } }

.bb__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--alber-paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.bb__brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--radius-3);
  background: var(--alber-orange-500);
  display: grid; place-items: center;
  color: var(--alber-navy-900);
  box-shadow: var(--shadow-brand);
}
.bb__brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--alber-orange-300);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}

.bb__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bb__nav a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-2);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: var(--text-s);
  font-weight: 500;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bb__nav a:hover { background: rgba(255,255,255,.06); color: var(--alber-paper); }
.bb__nav a.is-active { background: var(--alber-orange-500); color: var(--alber-navy-900); }
.bb__nav .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .8;
}
.bb__nav-section {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  padding: var(--space-3) 12px var(--space-1);
  margin-top: var(--space-2);
}
.bb__sidebar-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
  line-height: 1.7;
}

.bb__main { min-width: 0; background: var(--bg-page); }

/* Section frame */
.bb-section {
  padding: var(--space-24) var(--page-gutter);
  border-bottom: 1px solid var(--border-1);
  scroll-margin-top: 0;
}
.bb-section--dark {
  background: var(--alber-navy-800);
  color: var(--fg-inverse);
}
.bb-section--dark .display { color: var(--alber-paper); }
.bb-section--cream { background: var(--alber-cream); }
.bb-section--paper { background: var(--alber-paper); }
.bb-section--warm  { background: var(--alber-orange-50); }

.bb-section__head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  align-items: start;
}
@media (max-width: 700px) {
  .bb-section__head { grid-template-columns: 1fr; gap: var(--space-3); }
}
.bb-section__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fg-brand);
  padding-top: var(--space-3);
}
.bb-section__num::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: currentColor;
  margin-bottom: var(--space-4);
}
.bb-section__title {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: inherit;
}
.bb-section--dark .bb-section__title { color: var(--alber-paper); }
.bb-section__lede {
  font-size: var(--text-xl);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 64ch;
  margin: 0;
}
.bb-section--dark .bb-section__lede { color: rgba(255,255,255,.78); }

/* Subhead */
.bb-sub {
  font-family: var(--font-display);
  font-size: var(--display-s);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  margin: var(--space-12) 0 var(--space-6);
  color: var(--fg-deep);
}
.bb-section--dark .bb-sub { color: var(--alber-paper); }
.bb-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-brand);
  margin: 0 0 var(--space-2);
}

/* Card frames used to show tokens / specimens */
.spec {
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  position: relative;
}
.spec--inset { padding: 0; overflow: hidden; }
.spec__demo {
  background: var(--alber-cream);
  padding: var(--space-8);
  display: grid;
  place-items: center;
  min-height: 200px;
  border-bottom: 1px solid var(--border-1);
}
.spec__meta {
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
}
.spec__meta strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-deep);
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-auto { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Token chip */
.swatch {
  position: relative;
  border-radius: var(--radius-3);
  overflow: hidden;
  border: 1px solid var(--border-1);
  background: var(--alber-paper);
}
.swatch__color { height: 120px; }
.swatch__body { padding: var(--space-4); }
.swatch__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-l);
  color: var(--fg-deep);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2);
}
.swatch__hex {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 4px;
}
.swatch__var {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-brand);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Inline code */
code, .code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--gray-100);
  color: var(--alber-navy-800);
  padding: 2px 6px;
  border-radius: var(--radius-1);
  border: 1px solid var(--gray-200);
}
.bb-section--dark code { background: rgba(255,255,255,.08); color: var(--alber-orange-300); border-color: rgba(255,255,255,.12); }
pre.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--alber-navy-900);
  color: #E2E6ED;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-3);
  overflow-x: auto;
  line-height: 1.65;
  margin: 0;
}
pre.code-block .k  { color: #FF8956; }
pre.code-block .s  { color: #4DD2EC; }
pre.code-block .c  { color: #7E8699; font-style: italic; }
pre.code-block .v  { color: #B8CCE8; }

/* Two-up layout */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 800px) { .two-up { grid-template-columns: 1fr; } }

/* ===========================================================
   BUTTON SYSTEM
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  user-select: none;
}
.btn:focus-visible {
  outline: 3px solid rgba(255,107,44,.45);
  outline-offset: 2px;
}
/* sizes */
.btn--xs { font-size: 13px; padding: 6px 14px; }
.btn--sm { font-size: 14px; padding: 9px 18px; }
.btn--md { font-size: 16px; padding: 12px 22px; }
.btn--lg { font-size: 17px; padding: 16px 28px; }
.btn--xl { font-size: 18px; padding: 20px 34px; }

/* variants */
.btn--primary {
  background: var(--alber-orange-500);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--alber-orange-600); transform: translateY(-1px); }
.btn--primary:active { background: var(--alber-orange-700); transform: translateY(0); box-shadow: var(--shadow-2); }

.btn--secondary {
  background: var(--alber-navy-800);
  color: #fff;
}
.btn--secondary:hover { background: var(--alber-navy-900); }

.btn--outline {
  background: transparent;
  color: var(--alber-navy-800);
  border-color: var(--alber-navy-800);
}
.btn--outline:hover { background: var(--alber-navy-800); color: #fff; }
.bb-section--dark .btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.bb-section--dark .btn--outline:hover { background: #fff; color: var(--alber-navy-800); }

.btn--ghost {
  background: transparent;
  color: var(--alber-navy-800);
}
.btn--ghost:hover { background: var(--alber-navy-50); }

.btn--urgency {
  background: var(--alber-orange-500);
  color: #fff;
  box-shadow: var(--shadow-brand);
  position: relative;
}
.btn--urgency::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--alber-orange-500);
  z-index: -1;
  animation: alber-pulse 2s var(--ease-out) infinite;
}
@keyframes alber-pulse {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.4); }
}

.btn--aqua {
  background: var(--alber-aqua-500);
  color: var(--alber-navy-900);
  box-shadow: var(--shadow-aqua);
}
.btn--aqua:hover { background: var(--alber-aqua-600); color: #fff; }

/* ===========================================================
   BADGES & PILLS
   =========================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--alber-navy-50);
  color: var(--alber-navy-800);
  border: 1px solid var(--alber-navy-100);
}
.badge--orange { background: var(--alber-orange-50); color: var(--alber-orange-700); border-color: var(--alber-orange-100); }
.badge--aqua   { background: var(--alber-aqua-50);   color: var(--alber-aqua-700);   border-color: var(--alber-aqua-100); }
.badge--success { background: var(--success-50); color: var(--success-500); border-color: rgba(22,163,74,.2); }
.badge--solid-navy { background: var(--alber-navy-800); color: #fff; border-color: transparent; }
.badge--solid-orange { background: var(--alber-orange-500); color: #fff; border-color: transparent; }
.badge .msr { font-size: 14px; }

/* ===========================================================
   CARDS
   =========================================================== */
.card {
  background: var(--alber-paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-4);
  padding: var(--space-6);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-4); transform: translateY(-2px); }
.card--feature {
  background: var(--alber-navy-800);
  color: #fff;
  border-color: transparent;
}
.card--feature:hover { background: var(--alber-navy-900); }

/* Form field */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-m);
  color: var(--fg-1);
  background: var(--bg-paper);
  border: 1.5px solid var(--border-1);
  border-radius: var(--radius-2);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--alber-orange-500);
  box-shadow: 0 0 0 3px rgba(255,107,44,.18);
}

/* Helpers */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.wrap { flex-wrap: wrap; }
.center { justify-content: center; align-items: center; }
.between { justify-content: space-between; align-items: center; }
.muted { color: var(--fg-3); }
.brand { color: var(--fg-brand); }
.deep { color: var(--fg-deep); }