/* ============================================================
   Atrio Studio — Design Tokens
   Paleta: Latón Patinado
   Tipografía: Almagre (Newsreader + Inter + JetBrains Mono)
   Visual:    Atrio Cinemático
   ============================================================ */

:root {
  /* ---- color · light ---- */
  --color-background:   #F6F4EE;
  --color-surface:      #FBFAF6;
  --color-surface-alt:  #ECE8DE;
  --color-text:         #16161A;
  --color-text-muted:   #6A6862;
  --color-primary:      #16161A;
  --color-on-primary:   #F6F4EE;
  --color-accent:       #8C6A2A;
  --color-border:       #D8D3C5;
  --color-success:      #4A6B3D;
  --color-warning:      #A07215;
  --color-danger:       #A1322A;

  /* ---- spacing (escala generosa, density sparse) ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- radii (rectilíneos, casi rectos) ---- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- shadows (mínimas, premium) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 22, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(22, 22, 26, 0.06);
  --shadow-lg: 0 24px 60px rgba(22, 22, 26, 0.10);

  /* ---- motion (cinematic) ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.30, 1);
  --duration-fast: 220ms;
  --duration-med:  480ms;
  --duration-slow: 900ms;

  /* ---- typography ---- */
  --font-heading: "Newsreader", ui-serif, Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:  clamp(3.5rem, 8vw, 7rem);
  --fs-h1:       clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:       clamp(1.875rem, 3.5vw, 3rem);
  --fs-h3:       clamp(1.375rem, 2.4vw, 2rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-mono:     0.75rem;

  --lh-display: 1.02;
  --lh-heading: 1.10;
  --lh-body:    1.65;
  --lh-mono:    1.40;

  --tracking-display:        -0.02em;
  --tracking-heading:        -0.01em;
  --tracking-body:            0em;
  --tracking-mono-uppercase:  0.18em;

  /* ---- grid / container ---- */
  --grid-columns:        12;
  --grid-gutter:         1.5rem;
  --container-max:       1440px;
  --container-pad-x:     clamp(1.25rem, 4vw, 3rem);

  /* ---- semantic aliases ---- */
  color-scheme: light;
}

/* ---- color · dark ---- */
:root[data-theme="dark"] {
  --color-background:   #121315;
  --color-surface:      #1A1B1D;
  --color-surface-alt:  #222326;
  --color-text:         #ECEAE2;
  --color-text-muted:   #94928A;
  --color-primary:      #ECEAE2;
  --color-on-primary:   #121315;
  --color-accent:       #C7A364;
  --color-border:       #2E2F33;
  --color-success:      #8FA67C;
  --color-warning:      #D4A85E;
  --color-danger:       #D17666;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Auto-dark cuando no se ha forzado un tema explícito */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background:   #121315;
    --color-surface:      #1A1B1D;
    --color-surface-alt:  #222326;
    --color-text:         #ECEAE2;
    --color-text-muted:   #94928A;
    --color-primary:      #ECEAE2;
    --color-on-primary:   #121315;
    --color-accent:       #C7A364;
    --color-border:       #2E2F33;
    --color-success:      #8FA67C;
    --color-warning:      #D4A85E;
    --color-danger:       #D17666;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* Reset mínimo + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

/* Mono utility para labels técnicos */
.mono, [data-mono] {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--tracking-mono-uppercase);
  text-transform: uppercase;
}

/* Container base */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

/* Respeto a prefers-reduced-motion */
@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;
  }
}