:root {
  
  --surfaceBase: #f1f5f9;
  --surfaceRaised: #FFFFFF;
  --surfaceSunk: #e2e8f0;
  --surfaceInverse: #0f172a;

  
  --inkStrong: #0f172a;
  --inkBody: #334155;
  --inkQuiet: #475569;
  --inkOnAccent: #FFFFFF;

  
  --accentDeep: #1e3a8a;
  --accentDeepHi: #1e40af;
  --accentMetal: #7A5A16;
  --accentMetalHi: #6E5114;
  --accentMetalLight: #E4BA6B;

  
  --hairline: rgba(15, 23, 42, 0.16);
  --hairlineMetal: rgba(122, 90, 22, 0.38);
  --glowDeep: rgba(30, 58, 138, 0.20);
  --glowDeepStrong: rgba(30, 58, 138, 0.32);
  --glowMetal: rgba(122, 90, 22, 0.20);

  
  --gutter: 0.5rem;
  --stepXs: 0.35rem;
  --stepSm: 0.7rem;
  --stepMd: 1.05rem;
  --stepLg: 1.5rem;
  --stepXl: 2.25rem;
  --step2xl: 3.25rem;
  --bandPad: clamp(1.5rem, 3.4vw, 3.25rem);

  --measure: min(92%, 1180px);
  --corner: 3px;
  --cornerCard: 12px;
  --rule: 1px solid var(--hairline);

  --motion: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  --motionFast: 0.18s ease-out;
}

[data-theme="dark"] {
  --surfaceBase: #0D1117;
  --surfaceRaised: #171F2B;
  --surfaceSunk: #1E2A38;
  --surfaceInverse: #f1f5f9;

  --inkStrong: #F2F5F8;
  --inkBody: #C3CCD6;
  --inkQuiet: #9AA7B4;
  --inkOnAccent: #0D1117;

  --accentDeep: #E4BA6B;
  --accentDeepHi: #F0CE8D;
  --accentMetal: #E4BA6B;
  --accentMetalHi: #F0CE8D;
  --accentMetalLight: #E4BA6B;

  --hairline: rgba(228, 186, 107, 0.22);
  --hairlineMetal: rgba(228, 186, 107, 0.46);
  --glowDeep: rgba(228, 186, 107, 0.16);
  --glowDeepStrong: rgba(228, 186, 107, 0.30);
  --glowMetal: rgba(228, 186, 107, 0.24);
}