/* ============================================================
   VARIABLES v2 — Elevated Design System
   Dr. Elci Júnior Landing Page
   ============================================================ */

:root {
  /* ---- Core Palette ---- */
  --color-bg:             #F5F4F0;
  --color-bg-warm:        #EFEDE8;
  --color-bg-white:       #FAFAF8;
  --color-text:           #181714;
  --color-text-secondary: #5C5751;
  --color-text-tertiary:  #9B958E;

  --color-blue:           #16384C;
  --color-blue-mid:       #1C4A63;
  --color-blue-light:     #234F6A;
  --color-blue-deep:      #0E2535;
  --color-blue-muted:     rgba(22, 56, 76, 0.06);

  --color-gold:           #B28B52;
  --color-gold-light:     #C9A46E;
  --color-gold-pale:      rgba(178, 139, 82, 0.12);
  --color-gold-line:      rgba(178, 139, 82, 0.3);

  --color-border:         rgba(24, 23, 20, 0.08);
  --color-border-mid:     rgba(24, 23, 20, 0.12);
  --color-border-strong:  rgba(24, 23, 20, 0.2);

  /* ---- Typography ---- */
  --font-display: 'Instrument Serif', 'Georgia', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid sizes */
  --text-xs:     0.6875rem;    /* 11px */
  --text-sm:     0.8125rem;    /* 13px */
  --text-base:   0.9375rem;    /* 15px */
  --text-md:     1.0625rem;    /* 17px */
  --text-lg:     1.1875rem;    /* 19px */
  --text-xl:     clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl:    clamp(1.5rem, 2vw, 2rem);
  --text-3xl:    clamp(1.875rem, 2.6vw, 2.75rem);
  --text-4xl:    clamp(2.5rem, 3.5vw, 3.5rem);
  --text-5xl:    clamp(3rem, 4.5vw, 4.75rem);
  --text-hero:   clamp(3.5rem, 5.5vw, 5.5rem);
  --text-giant:  clamp(5rem, 9vw, 9rem);

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

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.04em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.16em;

  /* ---- Spacing ---- */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  2.5rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;
  --sp-16: 8rem;
  --sp-20: 10rem;

  /* ---- Layout ---- */
  --max-w:         1200px;
  --max-w-narrow:  760px;
  --max-w-wide:    1380px;
  --pad-x:         clamp(1.5rem, 4vw, 3rem);

  /* ---- Radius ---- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 3px rgba(18, 16, 12, 0.04);
  --shadow-sm: 0 2px 8px rgba(18, 16, 12, 0.05), 0 1px 2px rgba(18, 16, 12, 0.03);
  --shadow-md: 0 4px 20px rgba(18, 16, 12, 0.06), 0 2px 6px rgba(18, 16, 12, 0.04);
  --shadow-lg: 0 8px 40px rgba(18, 16, 12, 0.08), 0 4px 12px rgba(18, 16, 12, 0.05);
  --shadow-xl: 0 20px 60px rgba(18, 16, 12, 0.1), 0 8px 20px rgba(18, 16, 12, 0.06);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   140ms;
  --dur-base:   280ms;
  --dur-slow:   480ms;
  --dur-slower: 720ms;

  /* ---- Z layers ---- */
  --z-base:   1;
  --z-card:   5;
  --z-sticky: 20;
  --z-nav:    100;
  --z-modal:  200;
}