/* ==========================================================================
   Design Tokens — brsilva.co
   All colors, fonts, spacing, and sizing as CSS custom properties.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --color-bg:          #F5F3EF;
  --color-bg-alt:      #EDEAE4;
  --color-bg-dark:     #1A1A1A;
  --color-text:        #1A1A1A;
  --color-text-inv:    #F5F3EF;
  --color-text-sec:    #6B6560;
  --color-accent:      #2D2D2D;
  --color-border:      #D6D1CA;
  --color-placeholder: #C8C3BB;

  /* ---- Typography ---- */
  --font-display: 'Clash Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12-13 */
  --fs-sm:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);   /* 13-15 */
  --fs-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);  /* 15-17 */
  --fs-md:   clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);       /* 18-21 */
  --fs-lg:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);         /* 24-36 */
  --fs-xl:   clamp(2rem, 1.5rem + 2vw, 3.5rem);              /* 32-56 */
  --fs-2xl:  clamp(2.5rem, 1.8rem + 3vw, 5rem);              /* 40-80 */
  --fs-hero: clamp(3rem, 2rem + 4.5vw, 7rem);                /* 48-112 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ---- Spacing ---- */
  --space-xs:      clamp(8px, 1vw, 12px);
  --space-sm:      clamp(12px, 2vw, 20px);
  --space-md:      clamp(24px, 4vw, 40px);
  --space-lg:      clamp(40px, 6vw, 64px);
  --space-xl:      clamp(64px, 10vw, 120px);
  --space-section: clamp(80px, 12vw, 160px);

  /* ---- Layout ---- */
  --max-width:   1200px;
  --reading-width: 720px;
  --gutter:      clamp(20px, 4vw, 40px);

  /* ---- Transitions ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;

  /* ---- Borders / Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}