/* Zenia — tokens de marca v1
 * Generado desde tokens/zenia.tokens.json. Esa es la fuente de verdad: si cambia
 * un valor, cambialo ahí y regenerá este archivo.
 *
 * Las fuentes se cargan aparte, en el <head>:
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap">
 */

:root,
[data-theme="light"] {
  --surface-base: oklch(0.975 0.009 78.3);
  --surface-raised: oklch(0.992 0.007 80.7);
  --surface-sunken: oklch(0.945 0.012 79.8);
  --surface-muted: oklch(0.909 0.015 77.1);
  --border-subtle: oklch(0.897 0.016 77.1);
  --ink-strong: oklch(0.300 0.063 272.1);
  --ink-muted: oklch(0.444 0.051 272.7);
  --ink-soft: oklch(0.503 0.015 56.0);
  --ink-on-accent: oklch(0.975 0.009 78.3);
  --accent-coral: oklch(0.673 0.140 36.1);
  --accent-coral-deep: oklch(0.546 0.131 34.3);
  --accent-clay: oklch(0.778 0.088 40.3);
  --accent-indigo: oklch(0.426 0.091 272.5);
  --feedback-alert: oklch(0.517 0.166 28.7);

  --shadow-soft: 0 1px 2px rgba(35, 43, 77, 0.06), 0 8px 24px rgba(35, 43, 77, 0.06);
  --shadow-lifted: 0 2px 4px rgba(35, 43, 77, 0.08), 0 16px 40px rgba(35, 43, 77, 0.10);
}

[data-theme="dark"] {
  --surface-base: oklch(0.230 0.047 271.6);
  --surface-raised: oklch(0.300 0.063 272.1);
  --surface-sunken: oklch(0.200 0.044 274.0);
  --surface-muted: oklch(0.339 0.065 271.9);
  --border-subtle: oklch(0.391 0.071 273.3);
  --ink-strong: oklch(0.975 0.009 78.3);
  --ink-muted: oklch(0.838 0.031 273.6);
  --ink-soft: oklch(0.725 0.043 273.1);
  --ink-on-accent: oklch(0.230 0.047 271.6);
  --accent-coral: oklch(0.716 0.123 36.7);
  --accent-coral-deep: oklch(0.779 0.102 37.4);
  --accent-clay: oklch(0.490 0.096 37.4);
  --accent-indigo: oklch(0.715 0.077 274.2);
  --feedback-alert: oklch(0.740 0.126 26.5);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lifted: 0 2px 4px rgba(0, 0, 0, 0.48), 0 16px 40px rgba(0, 0, 0, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-base: oklch(0.230 0.047 271.6);
    --surface-raised: oklch(0.300 0.063 272.1);
    --surface-sunken: oklch(0.200 0.044 274.0);
    --surface-muted: oklch(0.339 0.065 271.9);
    --border-subtle: oklch(0.391 0.071 273.3);
    --ink-strong: oklch(0.975 0.009 78.3);
    --ink-muted: oklch(0.838 0.031 273.6);
    --ink-soft: oklch(0.725 0.043 273.1);
    --ink-on-accent: oklch(0.230 0.047 271.6);
    --accent-coral: oklch(0.716 0.123 36.7);
    --accent-coral-deep: oklch(0.779 0.102 37.4);
    --accent-clay: oklch(0.490 0.096 37.4);
    --accent-indigo: oklch(0.715 0.077 274.2);
    --feedback-alert: oklch(0.740 0.126 26.5);

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lifted: 0 2px 4px rgba(0, 0, 0, 0.48), 0 16px 40px rgba(0, 0, 0, 0.42);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-app-icon: 25px;

  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Estilos de texto ------------------------------------------------------- */

.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  font-weight: 600;
}

.display-lg {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 48;
}

.display-md {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 40;
}

.display-sm {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 28;
}

.title,
.body-lg,
.body,
.body-strong,
.caption,
.overline {
  font-family: var(--font-text);
}

.title { font-size: 20px; line-height: 26px; font-weight: 600; }
.body-lg { font-size: 17px; line-height: 26px; font-weight: 400; }
.body { font-size: 15px; line-height: 23px; font-weight: 400; }
.body-strong { font-size: 15px; line-height: 23px; font-weight: 600; }
.caption { font-size: 13px; line-height: 18px; font-weight: 400; }

.overline {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* El logotipo compuesto en vivo ------------------------------------------ */

.zenia-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variation-settings: "opsz" 48;
  color: var(--ink-strong);
  text-transform: lowercase;
}