/* ============================================================
   P&D LAW — Design System
   Coastal Professional — Tamarindo, Costa Rica
   ============================================================ */

:root {

  /* ── COLORS ── */
  --color-bg:           #F5F3EE;
  --color-surface:      #F5F3EE;
  --color-surface-alt:  #EFEBE3;
  --color-tint:         #FDF4EB;

  --color-text:          #2C2424;
  --color-text-secondary:#7A6E6E;
  --color-text-inverse:  #FAFAF7;

  --color-accent:        #E1873C;
  --color-accent-hover:  #C8722A;
  --color-accent-active: #B4641F;
  --color-accent-muted:  #F0C99A;
  --color-charcoal:      #483D3D;
  --color-charcoal-deep: #2C2424;

  --color-border:        #E2DBD0;
  --color-border-strong: #C8BEB2;

  --color-success: #3D7A5A;
  --color-warning: #C4922A;
  --color-error:   #B84040;
  --color-info:    #3D6A8A;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs:   clamp(0.7rem,  0.65rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.1rem,  1rem    + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.3rem,  1.1rem  + 1vw,    1.5rem);
  --text-2xl:  clamp(1.6rem,  1.3rem  + 1.5vw,  2rem);
  --text-3xl:  clamp(2rem,    1.5rem  + 2.5vw,  2.75rem);
  --text-4xl:  clamp(2.5rem,  1.8rem  + 3.5vw,  3.75rem);
  --text-5xl:  clamp(3rem,    2rem    + 5vw,    5rem);

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;

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

  /* ── SPACING (8px grid) ── */
  --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;

  /* ── LAYOUT ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-max: 1440px;
  --container-pad: clamp(var(--space-4), 5vw, var(--space-16));

  /* ── BORDERS ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SHADOWS (orange-tinted) ── */
  --shadow-tint: 225, 135, 60;

  --shadow-sm:
    0 1px 2px rgba(var(--shadow-tint), 0.04),
    0 1px 4px rgba(72, 61, 61, 0.04);

  --shadow-md:
    0 2px 4px  rgba(var(--shadow-tint), 0.04),
    0 4px 12px rgba(var(--shadow-tint), 0.07),
    0 1px 3px  rgba(72, 61, 61, 0.05);

  --shadow-lg:
    0 4px 8px  rgba(var(--shadow-tint), 0.04),
    0 8px 24px rgba(var(--shadow-tint), 0.09),
    0 2px 6px  rgba(72, 61, 61, 0.06);

  --shadow-xl:
    0 8px  16px rgba(var(--shadow-tint), 0.05),
    0 16px 48px rgba(var(--shadow-tint), 0.11),
    0 4px  12px rgba(72, 61, 61, 0.07);

  --shadow-inset:
    inset 0 1px 3px rgba(72, 61, 61, 0.08);

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

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   1000ms;
  --duration-photo:  400ms;

  /* ── HERO OVERLAY ── */
  --hero-overlay-combined:
    linear-gradient(
      to top,
      rgba(28, 22, 22, 0.88) 0%,
      rgba(28, 22, 22, 0.55) 35%,
      rgba(28, 22, 22, 0.15) 65%,
      rgba(44, 36, 36, 0.35) 100%
    );

  /* ── TEAM PHOTO B&W → COLOR ── */
  --photo-filter-default: grayscale(1) contrast(1.05) brightness(0.97);
  --photo-filter-hover:   grayscale(0) contrast(1) brightness(1);
  --photo-transition:
    filter var(--duration-photo) var(--ease),
    transform var(--duration-photo) var(--ease-spring);

  /* ── Z-INDEX ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
}