/* ==========================================================================
   InPix.Me — Design Tokens (Variant 1: Graphite & Warm Bronze, 1:1 TMHoldingLLC)
   ========================================================================== */

:root {
  /* ---- Primitive Palette ---- */
  --p-graphite-950: #181A1D;
  --p-graphite-900: #202226;
  --p-graphite-850: #26282C;
  --p-graphite-800: #2D2F33;
  --p-graphite-750: #323438;
  --p-graphite-700: #3A3D42;
  --p-graphite-600: #4A4D53;

  --p-bronze-600: #9E7B56;
  --p-bronze-500: #BD9973;
  --p-bronze-400: #CFAF8C;
  --p-bronze-300: #DFC6AA;
  --p-bronze-200: #EFE2D2;

  --p-ivory-50:  #FFFFFF;
  --p-ivory-100: #F5F2EE;
  --p-ivory-200: #E4DFD9;
  --p-ivory-300: #C8C2BA;
  --p-ivory-400: #A59E95;

  --p-emerald-400: #4ADE80;
  --p-emerald-500: #10B981;
  --p-coral-400:   #F87171;

  /* ---- Semantic Surfaces ---- */
  --bg-canvas:     var(--p-graphite-750);
  --bg-deep:       var(--p-graphite-850);
  --bg-elevated:   var(--p-graphite-800);
  --bg-card:       var(--p-graphite-700);
  --bg-input:      rgba(24, 26, 29, 0.55);
  --bg-glass:      rgba(38, 40, 44, 0.88);
  --bg-overlay:    rgba(24, 26, 29, 0.96);
  --bg-scrim:      rgba(18, 20, 23, 0.78);
  --bg-badge-dark: rgba(24, 26, 29, 0.82);

  /* ---- Semantic Text ---- */
  --text-primary:   var(--p-ivory-50);
  --text-secondary: rgba(245, 242, 238, 0.82);
  --text-muted:     rgba(245, 242, 238, 0.68);
  --text-subtle:    rgba(245, 242, 238, 0.62);
  --text-accent:    var(--p-bronze-400);
  --text-on-accent: var(--p-graphite-950);
  --text-success:   var(--p-emerald-400);
  --text-error:     var(--p-coral-400);

  /* ---- Semantic Accent & Interactive ---- */
  --accent-primary:       var(--p-bronze-500);
  --accent-primary-hover: var(--p-bronze-400);
  --accent-primary-active:var(--p-bronze-600);
  --accent-subtle:        rgba(189, 153, 115, 0.14);
  --accent-glow:          rgba(189, 153, 115, 0.28);
  --status-success-bg:    rgba(16, 185, 129, 0.14);
  --status-error-bg:      rgba(248, 113, 113, 0.14);

  /* ---- Borders & Dividers ---- */
  --border-hairline: rgba(255, 255, 255, 0.12);
  --border-subtle:   rgba(255, 255, 255, 0.18);
  --border-accent:   rgba(189, 153, 115, 0.45);
  --border-strong:   rgba(189, 153, 115, 0.80);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-sans:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid Type Scale */
  --fs-hero:    clamp(2.5rem, 4.8vw + 0.8rem, 4.75rem);
  --fs-h1:      clamp(2.125rem, 3.6vw + 0.6rem, 3.75rem);
  --fs-h2:      clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.3vw + 0.5rem, 1.625rem);
  --fs-h4:      clamp(1.0625rem, 0.8vw + 0.5rem, 1.25rem);
  --fs-lead:    clamp(1.125rem, 0.6vw + 0.9rem, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* Line Heights */
  --lh-tight:   1.12;
  --lh-heading: 1.22;
  --lh-snug:    1.38;
  --lh-body:    1.72;

  /* Letter Spacing */
  --ls-display:  0.04em;
  --ls-wide:     0.16em;
  --ls-widest:   0.24em;

  /* ---- Spacing Scale (4px base) ---- */
  --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;

  /* Section Vertical Rhythm */
  --section-py:       clamp(5rem, 10vw, 9.5rem);
  --section-py-tight: clamp(3.5rem, 6vw, 6rem);

  /* ---- Layout & Grid ---- */
  --container-max:    1440px;
  --container-narrow: 920px;
  --container-pad:    clamp(1.5rem, 5vw, 5rem);
  --header-height:    140px;
  --header-height-compact: 104px;

  /* ---- Motion & Elevation ---- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       200ms;
  --dur-base:       400ms;
  --dur-slow:       800ms;
  --dur-cinematic:  1200ms;

  --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-focus:    0 0 0 2px var(--p-graphite-900), 0 0 0 4px var(--p-bronze-400);
}