/* =========================================================
   Anagrama Design System — Tokens
   Capa 1: variables, reset, layout, tipografia, utilidades
   Modo: dark default, light como alternativa
   Ref: DS-anagrama-system v1.0
   ========================================================= */

:root {
  /* ── Anagrama raw palette ── */
  --raw-depth:        #0a0f0d;
  --raw-carbon:       #141a17;
  --raw-slate:        #1e2a25;
  --raw-moss-dark:    #2a3830;
  --raw-moss:         #354f52;
  --raw-teal:         #52796f;
  --raw-teal-vivid:   #84a98c;
  --raw-teal-light:   #a3c4ab;
  --raw-lichen:       #8fa898;
  --raw-fog:          #e8ece9;
  --raw-ash:          #cad2c5;

  /* ── Semantic: dark mode (default) ── */
  --surface-0:        var(--raw-depth);
  --surface-1:        var(--raw-carbon);
  --surface-2:        var(--raw-slate);
  --surface-3:        var(--raw-moss-dark);
  --text-primary:     var(--raw-fog);
  --text-secondary:   var(--raw-lichen);
  --text-muted:       #5a7565;
  --accent:           var(--raw-teal-vivid);
  --accent-hover:     var(--raw-teal-light);
  --accent-subtle:    rgba(132,169,140,0.1);
  --accent-glow:      rgba(132,169,140,0.08);
  --on-accent:        var(--raw-depth);

  /* ── Signal semantics ── */
  --signal-insight:   #84a98c;
  --signal-warning:   #d4a847;
  --signal-critical:  #c75d5d;
  --signal-neutral:   #5a7565;

  /* ── Typography ── */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  --text-hero:    clamp(2.5rem, 5vw, 4rem);
  --text-display: clamp(1.5rem, 3vw, 2.25rem);
  --text-heading: 1.25rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-data:    0.875rem;

  --line-hero:    1.08;
  --line-display: 1.15;
  --line-heading: 1.3;
  --line-body:    1.6;
  --line-caption: 1.4;

  --tracking-display: -0.03em;
  --tracking-heading: -0.01em;
  --tracking-label:    0.08em;

  /* ── Spacing (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;

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --border: 1px solid var(--surface-3);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* ── Layout ── */
  --container-lg: 72rem;
  --container-md: 56rem;
  --container-sm: 40rem;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration:  0.2s;
  --duration-slow: 0.6s;

  /* ── Focus ── */
  --focus-ring:   2px solid var(--accent);
  --focus-offset: 2px;
}

/* =========================================================
   Light mode override
   ========================================================= */

@media (prefers-color-scheme: light) {
  :root.auto-theme {
    --surface-0:      #f2f4f1;
    --surface-1:      #ffffff;
    --surface-2:      #e8ece9;
    --surface-3:      #cad2c5;
    --text-primary:   #1e2a25;
    --text-secondary: #354f52;
    --text-muted:     #5a7565;
    --accent:         #52796f;
    --accent-hover:   #2f3e46;
    --accent-subtle:  rgba(82,121,111,0.08);
    --accent-glow:    rgba(82,121,111,0.06);
    --on-accent:      #ffffff;
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.08);
  }
}

/* =========================================================
   Reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* =========================================================
   Layout
   ========================================================= */

.container    { width: min(100% - 2rem, var(--container-lg)); margin-inline: auto; }
.container-md { width: min(100% - 2rem, var(--container-md)); margin-inline: auto; }
.container-sm { width: min(100% - 2rem, var(--container-sm)); margin-inline: auto; }

/* =========================================================
   Typography
   ========================================================= */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
}

.display-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
}

/* =========================================================
   Utilities
   ========================================================= */

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-sm        { font-size: var(--text-body-sm); }
.text-xs        { font-size: var(--text-caption); }
.text-mono      { font-family: var(--font-mono); }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}