/* =========================================================
   PGS 3D - Design Tokens
   Extends the original PGS palette with glass + depth tokens.
   ========================================================= */

:root {
  /* === Brand palette (inherited from pgs-theme) === */
  --pgs-primary:        #0D9488;
  --pgs-primary-dark:   #0F766E;
  --pgs-primary-light:  #14B8A6;
  --pgs-primary-bg:     #CCFBF1;
  --pgs-text:           #1E293B;
  --pgs-text-light:     #64748B;
  --pgs-text-muted:     #94A3B8;
  --pgs-border:         #E2E8F0;
  --pgs-bg:             #FFFFFF;
  --pgs-bg-alt:         #F1F5F9;
  --pgs-dark:           #1E293B;
  --pgs-success:        #16A34A;

  /* === Glass surfaces (NEW) === */
  --pgs-glass-bg:           rgba(255, 255, 255, 0.55);
  --pgs-glass-bg-strong:    rgba(255, 255, 255, 0.78);
  --pgs-glass-bg-tinted:    rgba(204, 251, 241, 0.45);
  --pgs-glass-border:       rgba(255, 255, 255, 0.7);
  --pgs-glass-border-dark:  rgba(15, 23, 42, 0.08);
  --pgs-glass-blur:         18px;

  /* === Teal-tinted multi-layer depth shadows (NEW) === */
  --pgs-shadow-1:
    0 1px 2px rgba(13, 148, 136, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.06);
  --pgs-shadow-2:
    0 1px 2px rgba(13, 148, 136, 0.05),
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 12px 24px rgba(13, 148, 136, 0.05);
  --pgs-shadow-3:
    0 1px 2px rgba(13, 148, 136, 0.06),
    0 8px 20px rgba(15, 23, 42, 0.10),
    0 24px 48px rgba(13, 148, 136, 0.08);
  --pgs-shadow-glow:
    0 0 0 1px rgba(13, 148, 136, 0.20),
    0 10px 30px rgba(13, 148, 136, 0.18),
    0 24px 60px rgba(13, 148, 136, 0.10);
  --pgs-shadow-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04);

  /* === Section mesh gradient backgrounds (NEW) === */
  --pgs-mesh-light:
    radial-gradient(at 18% 12%, rgba(204, 251, 241, 0.55) 0px, transparent 50%),
    radial-gradient(at 82% 28%, rgba(20, 184, 166, 0.10) 0px, transparent 55%),
    radial-gradient(at 50% 100%, rgba(241, 245, 249, 0.85) 0px, transparent 60%),
    #FFFFFF;
  --pgs-mesh-alt:
    radial-gradient(at 90% 10%, rgba(13, 148, 136, 0.08) 0px, transparent 50%),
    radial-gradient(at 10% 90%, rgba(204, 251, 241, 0.50) 0px, transparent 50%),
    #F1F5F9;
  --pgs-mesh-warm:
    radial-gradient(at 30% 50%, rgba(204, 251, 241, 0.65) 0px, transparent 55%),
    radial-gradient(at 75% 80%, rgba(20, 184, 166, 0.08) 0px, transparent 60%),
    #FFFFFF;
  --pgs-mesh-dark:
    radial-gradient(at 20% 20%, rgba(13, 148, 136, 0.22) 0px, transparent 55%),
    radial-gradient(at 80% 80%, rgba(15, 118, 110, 0.28) 0px, transparent 60%),
    radial-gradient(at 50% 50%, rgba(13, 148, 136, 0.06) 0px, transparent 70%),
    #0B1220;

  /* === Spacing scale === */
  --pgs-space-xs:   0.5rem;
  --pgs-space-sm:   0.75rem;
  --pgs-space-md:   1rem;
  --pgs-space-lg:   1.5rem;
  --pgs-space-xl:   2rem;
  --pgs-space-2xl:  3rem;
  --pgs-space-3xl:  5rem;
  --pgs-space-4xl:  7rem;

  /* === Radii === */
  --pgs-radius-sm:   8px;
  --pgs-radius-md:   12px;
  --pgs-radius-lg:   18px;
  --pgs-radius-xl:   24px;
  --pgs-radius-pill: 999px;

  /* === Easings === */
  --pgs-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --pgs-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --pgs-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* === Type scale === */
  --pgs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pgs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --pgs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --pgs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --pgs-body: clamp(1rem, 1.1vw, 1.125rem);

  /* === Layout === */
  --pgs-container: 1200px;
  --pgs-container-text: 760px;
}