:root {
  /* ── Brand ── */
  --color-primary:       #2F3747;
  --color-primary-light: #5E6573;
  --color-primary-dark:  #1B2230;
  --color-primary-bg:    #EEF1F4;
  --color-accent:        #6B7280;
  --color-accent-light:  #E5E7EB;

  /* ── Semantic ── */
  --color-success:     #4B5563;
  --color-success-bg:  #EDF0F2;
  --color-error:       #DC2626;
  --color-error-bg:    #FEECEC;
  --color-warning:     #6B7280;
  --color-warning-bg:  #F2F3F5;

  /* ── Neutrals ── */
  --color-bg:          #F3F4F6;
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F7F7F8;
  --color-border:      #E5E7EB;
  --color-text:        #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted:  #9CA3AF;
  --color-icon:        #9CA3AF;
  --color-icon-active: #2F3747;

  /* ── Typography ── */
  --font-sans:   'SF Pro Text', 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-lg:   1.0625rem; /* 17px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2rem;      /* 32px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.4;

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

  /* ── Radius ── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.125rem;
  --radius-2xl:  1.375rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 1px rgba(17,24,39,.03);
  --shadow-sm:  0 1px 2px rgba(17,24,39,.04), 0 2px 6px rgba(17,24,39,.03);
  --shadow-md:  0 2px 8px rgba(17,24,39,.06);
  --shadow-lg:  0 8px 20px rgba(17,24,39,.08);
  --shadow-xl:  0 14px 32px rgba(17,24,39,.10);
  --shadow-sheet: 0 -8px 26px rgba(17,24,39,.10);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Layout ── */
  --bottom-nav-h: 5.9rem; /* barra flotante compacta + FAB sobre la muesca */
  --header-h:     3.5rem;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);
  --max-width:    25.5rem;
}