/* ═══════════════════════════════════════════════════════════
   MEUBILY — DESIGN TOKENS
   Palette inspirée du logo : Navy #1B2B4B + Teal #7B9EA8
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-navy:       #1B2B4B;   /* couleur principale logo */
  --color-navy-dark:  #0F1C32;
  --color-navy-mid:   #253A5E;
  --color-teal:       #7B9EA8;   /* accent logo */
  --color-teal-light: #A8C2CB;
  --color-teal-pale:  #E8F0F3;

  /* ── Neutrals ── */
  --color-white:      #FFFFFF;
  --color-off-white:  #F7F8F9;
  --color-light:      #F0F3F5;
  --color-border:     #DDE3E8;
  --color-border-light: #EEF1F4;
  --color-muted:      #8A96A3;
  --color-body:       #3D4A57;
  --color-heading:    #1B2B4B;

  /* ── Semantic ── */
  --color-success:    #2E9E6B;
  --color-success-bg: #E8F5EF;
  --color-info:       #3B82C4;
  --color-info-bg:    #E8F0F9;
  --color-warning:    #D4820F;

  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* ── Spacing ── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px 0 rgba(27,43,75,0.06), 0 1px 2px 0 rgba(27,43,75,0.04);
  --shadow-md:   0 4px 16px 0 rgba(27,43,75,0.08), 0 2px 6px 0 rgba(27,43,75,0.06);
  --shadow-lg:   0 8px 32px 0 rgba(27,43,75,0.12), 0 4px 12px 0 rgba(27,43,75,0.08);
  --shadow-xl:   0 20px 60px 0 rgba(27,43,75,0.16), 0 8px 24px 0 rgba(27,43,75,0.1);
  --shadow-card: 0 2px 20px 0 rgba(27,43,75,0.08);

  /* ── Transitions ── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   150ms var(--ease-out-quart);
  --transition-base:   300ms var(--ease-out-quart);
  --transition-slow:   600ms var(--ease-out-quart);

  /* ── Layout ── */
  --container-max:      1200px;
  --container-narrow:   780px;
  --nav-height:         72px;
  --section-padding-y:  var(--space-24);
}