/* estilos-base.css — PlayAtlas · Casino de Viña del Mar: historia
   Reset, tokens de diseño, tipografía base. */

:root{
  --color-bg-dark:#0B2E36;
  --color-surface-dark:#123C46;
  --color-accent-brass:#C77B3C;
  --color-accent-terracotta:#E0A469;
  --color-bg-light:#FBF6EC;
  --color-text-onlight:#1B2A2E;
  --color-text-ondark:#EAF3F1;
  --color-warning:#A6432B;
  --color-success:#3E6B5C;

  --font-heading:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --fs-12:0.75rem;
  --fs-14:0.875rem;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-22:1.375rem;
  --fs-28:1.75rem;
  --fs-36:2.25rem;
  --fs-48:3rem;

  --lh-text:1.55;
  --lh-heading:1.2;

  --max-content:1180px;
  --gutter:24px;
  --gutter-mobile:16px;

  --radius-sm:4px;
  --radius-md:10px;
  --focus-ring:2px solid var(--color-accent-brass);

  --transition-fast:150ms ease;
  --transition-zoom:300ms ease;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg-light:#E8E1D2;
  }
}
:root[data-theme="dark"]{
  --color-bg-light:#E8E1D2;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-bg-light);
  color:var(--color-text-onlight);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:var(--lh-text);
  font-variant-numeric:tabular-nums;
}
img,svg{max-width:100%;display:block;}
a{color:var(--color-accent-brass);text-decoration-thickness:2px;text-underline-offset:2px;}
a:hover{color:var(--color-accent-terracotta);}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:var(--lh-heading);
  margin:0 0 0.6em;
  color:var(--color-text-onlight);
}
h1{font-size:var(--fs-36);font-weight:500;}
h2{font-size:var(--fs-28);}
h3{font-size:var(--fs-22);}
h4{font-size:var(--fs-18);}
p{margin:0 0 1em;max-width:70ch;}
main p, main li{max-width:68ch;}
ul,ol{margin:0 0 1em;padding-left:1.4em;}
table{border-collapse:collapse;width:100%;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(27,42,46,0.15);}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
[hidden]{display:none!important;}

.skip-link{
  position:absolute;
  left:8px;top:-60px;
  background:var(--color-bg-light);
  color:var(--color-text-onlight);
  padding:10px 16px;
  border-radius:var(--radius-sm);
  z-index:1000;
  transition:top var(--transition-fast);
  border:2px solid var(--color-accent-brass);
}
.skip-link:focus{top:8px;}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}
