/* ── SoporteInfo.net — Legal Pages Shared Styles ── */
/* Same Material Design 3 tokens as tailwind.css @theme — hardcoded for static CSS */

/* Background colors */
.bg-surface { background-color: #041329; }
.bg-surface-dim { background-color: #041329; }
.bg-surface-container-lowest { background-color: #010e24; }
.bg-surface-container-low { background-color: #0d1c32; }
.bg-surface-container { background-color: #112036; }
.bg-surface-container-high { background-color: #1c2a41; }
.bg-surface-container-highest { background-color: #27354c; }
.bg-surface-variant { background-color: #27354c; }
.bg-surface-bright { background-color: #2c3951; }
.bg-on-surface { background-color: #d6e3ff; }
.bg-on-surface-variant { background-color: #bacac3; }
.bg-on-background { background-color: #d6e3ff; }
.bg-background { background-color: #041329; }
.bg-primary { background-color: #ffffff; }
.bg-primary-fixed { background-color: #5ffbd6; }
.bg-primary-fixed-dim { background-color: #38debb; }
.bg-primary-container { background-color: #5ffbd6; }
.bg-on-primary { background-color: #00382d; }
.bg-on-primary-container { background-color: #00725e; }
.bg-secondary { background-color: #aeecff; }
.bg-secondary-fixed { background-color: #aeecff; }
.bg-secondary-fixed-dim { background-color: #00d9ff; }
.bg-secondary-container { background-color: #00d9ff; }
.bg-on-secondary { background-color: #003641; }
.bg-on-secondary-container { background-color: #005b6c; }
.bg-outline { background-color: #85948e; }
.bg-outline-variant { background-color: #3c4a45; }
.bg-error { background-color: #ffb4ab; }
.bg-error-container { background-color: #93000a; }
.bg-on-error { background-color: #690005; }
.bg-on-error-container { background-color: #ffdad6; }
.bg-inverse-surface { background-color: #d6e3ff; }
.bg-inverse-on-surface { background-color: #233148; }
.bg-inverse-primary { background-color: #006b58; }
.bg-cyan { background-color: #64ffda; }
.bg-blue { background-color: #00d9ff; }
.bg-purple { background-color: #b026ff; }
.bg-magenta { background-color: #ff00ff; }

/* Text colors */
.text-surface { color: #041329; }
.text-surface-dim { color: #041329; }
.text-surface-container-lowest { color: #010e24; }
.text-surface-container-low { color: #0d1c32; }
.text-surface-container { color: #112036; }
.text-surface-container-high { color: #1c2a41; }
.text-surface-container-highest { color: #27354c; }
.text-surface-variant { color: #27354c; }
.text-surface-bright { color: #2c3951; }
.text-on-surface { color: #d6e3ff; }
.text-on-surface-variant { color: #bacac3; }
.text-on-background { color: #d6e3ff; }
.text-background { color: #041329; }
.text-primary { color: #ffffff; }
.text-primary-fixed { color: #5ffbd6; }
.text-primary-fixed-dim { color: #38debb; }
.text-primary-container { color: #5ffbd6; }
.text-on-primary { color: #00382d; }
.text-on-primary-container { color: #00725e; }
.text-secondary { color: #aeecff; }
.text-secondary-fixed { color: #aeecff; }
.text-secondary-fixed-dim { color: #00d9ff; }
.text-secondary-container { color: #00d9ff; }
.text-on-secondary { color: #003641; }
.text-on-secondary-container { color: #005b6c; }
.text-outline { color: #85948e; }
.text-outline-variant { color: #3c4a45; }
.text-error { color: #ffb4ab; }
.text-error-container { color: #93000a; }
.text-on-error { color: #690005; }
.text-on-error-container { color: #ffdad6; }
.text-inverse-surface { color: #d6e3ff; }
.text-inverse-on-surface { color: #233148; }
.text-inverse-primary { color: #006b58; }
.text-cyan { color: #64ffda; }
.text-blue { color: #00d9ff; }
.text-purple { color: #b026ff; }
.text-magenta { color: #ff00ff; }

/* Border colors */
.border-surface { border-color: #041329; }
.border-surface-dim { border-color: #041329; }
.border-surface-container-lowest { border-color: #010e24; }
.border-surface-container-low { border-color: #0d1c32; }
.border-surface-container { border-color: #112036; }
.border-surface-container-high { border-color: #1c2a41; }
.border-surface-container-highest { border-color: #27354c; }
.border-surface-variant { border-color: #27354c; }
.border-surface-bright { border-color: #2c3951; }
.border-on-surface { border-color: #d6e3ff; }
.border-on-surface-variant { border-color: #bacac3; }
.border-on-background { border-color: #d6e3ff; }
.border-background { border-color: #041329; }
.border-primary { border-color: #ffffff; }
.border-primary-fixed { border-color: #5ffbd6; }
.border-primary-fixed-dim { border-color: #38debb; }
.border-primary-container { border-color: #5ffbd6; }
.border-on-primary { border-color: #00382d; }
.border-on-primary-container { border-color: #00725e; }
.border-secondary { border-color: #aeecff; }
.border-secondary-fixed { border-color: #aeecff; }
.border-secondary-fixed-dim { border-color: #00d9ff; }
.border-secondary-container { border-color: #00d9ff; }
.border-on-secondary { border-color: #003641; }
.border-on-secondary-container { border-color: #005b6c; }
.border-outline { border-color: #85948e; }
.border-outline-variant { border-color: #3c4a45; }
.border-error { border-color: #ffb4ab; }
.border-error-container { border-color: #93000a; }
.border-on-error { border-color: #690005; }
.border-on-error-container { border-color: #ffdad6; }
.border-inverse-surface { border-color: #d6e3ff; }
.border-inverse-on-surface { border-color: #233148; }
.border-inverse-primary { border-color: #006b58; }
.border-cyan { border-color: #64ffda; }
.border-blue { border-color: #00d9ff; }
.border-purple { border-color: #b026ff; }
.border-magenta { border-color: #ff00ff; }

/* Ring colors */
.ring-surface { --tw-ring-color: #041329; }
.ring-surface-container-lowest { --tw-ring-color: #010e24; }
.ring-surface-container-low { --tw-ring-color: #0d1c32; }
.ring-surface-container { --tw-ring-color: #112036; }
.ring-surface-container-high { --tw-ring-color: #1c2a41; }
.ring-surface-container-highest { --tw-ring-color: #27354c; }
.ring-surface-variant { --tw-ring-color: #27354c; }
.ring-primary { --tw-ring-color: #ffffff; }
.ring-primary-fixed { --tw-ring-color: #5ffbd6; }
.ring-primary-container { --tw-ring-color: #5ffbd6; }
.ring-secondary { --tw-ring-color: #aeecff; }
.ring-secondary-fixed { --tw-ring-color: #aeecff; }
.ring-secondary-container { --tw-ring-color: #00d9ff; }
.ring-on-secondary { --tw-ring-color: #003641; }
.ring-error { --tw-ring-color: #ffb4ab; }
.ring-error-container { --tw-ring-color: #93000a; }
.ring-on-error { --tw-ring-color: #690005; }
.ring-cyan { --tw-ring-color: #64ffda; }
.ring-blue { --tw-ring-color: #00d9ff; }
.ring-purple { --tw-ring-color: #b026ff; }

/* Font families */
.font-headline { font-family: 'Space Grotesk', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; }
.font-label { font-family: 'JetBrains Mono', monospace; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Opacity variants */
.bg-surface-container\/50 { background-color: rgba(17,32,54,0.5); }
.bg-surface-container\/60 { background-color: rgba(17,32,54,0.6); }
.bg-surface-container\/80 { background-color: rgba(17,32,54,0.8); }
.bg-surface-container-low\/60 { background-color: rgba(13,28,50,0.6); }
.bg-surface-container-high\/30 { background-color: rgba(28,42,65,0.3); }
.bg-surface-container-high\/50 { background-color: rgba(28,42,65,0.5); }
.bg-surface-container-highest\/50 { background-color: rgba(39,53,76,0.5); }
.bg-surface-container-lowest\/50 { background-color: rgba(1,14,36,0.5); }
.bg-secondary-container\/20 { background-color: rgba(0,217,255,0.2); }
.bg-secondary-container\/30 { background-color: rgba(0,217,255,0.3); }
.bg-secondary-container\/50 { background-color: rgba(0,217,255,0.5); }
.bg-secondary\/20 { background-color: rgba(174,236,255,0.2); }
.bg-error\/5 { background-color: rgba(255,180,171,0.05); }
.bg-error\/10 { background-color: rgba(255,180,171,0.1); }
.bg-error\/20 { background-color: rgba(255,180,171,0.2); }
.bg-primary-container\/50 { background-color: rgba(95,251,214,0.5); }
.bg-primary-container\/20 { background-color: rgba(95,251,214,0.2); }

.text-error\/80 { color: rgba(255,180,171,0.8); }
.text-secondary\/80 { color: rgba(174,236,255,0.8); }
.text-secondary-container\/80 { color: rgba(0,217,255,0.8); }

.border-error\/20 { border-color: rgba(255,180,171,0.2); }
.border-secondary\/20 { border-color: rgba(174,236,255,0.2); }
.border-secondary\/30 { border-color: rgba(174,236,255,0.3); }

.ring-secondary\/30 { --tw-ring-color: rgba(174,236,255,0.3); }