/* ============================================================
   DESIGN SYSTEM — Geom. Andrea Saggio
   Premium Technical Studio Website
   ============================================================ */

:root {
  /* ── Color Palette ─────────────────────────────── */
  --color-white:        #ffffff;
  --color-off-white:    #faf9f7;
  --color-warm-white:   #f5f3ef;
  --color-cream:        #ede9e3;
  --color-beige:        #ddd8d0;
  --color-light-gray:   #c8c3bb;
  --color-mid-gray:     #9a958d;
  --color-warm-gray:    #7a756d;
  --color-dark-gray:    #4a4640;
  --color-charcoal:     #3a3632;
  --color-graphite:     #2a2724;
  --color-deep:         #1a1816;

  /* Accent — extracted from logo red, toned down for elegance */
  --color-accent:       #8b2d2d;
  --color-accent-light: #a34040;
  --color-accent-hover: #722424;
  --color-accent-soft:  rgba(139, 45, 45, 0.08);

  /* Functional */
  --color-success:      #3a6b4a;
  --color-error:        #8b3a3a;
  --color-overlay:      rgba(26, 24, 22, 0.6);
  --color-overlay-light:rgba(26, 24, 22, 0.3);

  /* ── Typography ────────────────────────────────── */
  --font-heading:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.25rem;    /* 52px */
  --text-5xl:  4rem;       /* 64px */
  --text-6xl:  5rem;       /* 80px */

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

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

  /* Section Spacing */
  --section-py:      clamp(5rem, 10vw, 8rem);
  --section-py-lg:   clamp(6rem, 12vw, 10rem);

  /* Container */
  --container-max:   1240px;
  --container-wide:  1400px;
  --container-narrow:800px;
  --container-px:    clamp(1.25rem, 4vw, 3rem);

  /* ── Borders & Radius ──────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  --border-light:  1px solid rgba(0, 0, 0, 0.06);
  --border-medium: 1px solid rgba(0, 0, 0, 0.1);
  --border-accent: 2px solid var(--color-accent);

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.10);

  /* ── Transitions ───────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   500ms;
  --duration-slower: 700ms;

  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ── Z-Index ───────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ── Navbar ────────────────────────────────────── */
  --navbar-height: 80px;
  --navbar-height-scrolled: 64px;
}