/* Arkh Solutions — design tokens v1
   Tema claro por defecto; tema oscuro con <html data-theme="dark"> o automático según el sistema.
   Uso en ASP.NET Core: wwwroot/css/arkh-tokens.css + wwwroot/fonts/*.woff2, y en _Layout.cshtml:
   <link rel="stylesheet" href="~/css/arkh-tokens.css" asp-append-version="true" /> */

@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Italic-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable-latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Italic-Variable-latin.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root, [data-theme="light"] {
  --hueso: #faf7f2;
  --taupe: #3d372f;
  --berenjena: #6b4058;
  --gris-calido: #b5ac9e;
  --berenjena-50: #f7f1f4;
  --berenjena-100: #efe4ea;
  --berenjena-300: #c9a3b8;
  --berenjena-600: #58334a;
  --berenjena-700: #472a3c;
  --gris-100: #f1ece4;
  --gris-200: #e4ddd2;
  --gris-600: #6e665a;
  --taupe-900: #27231e;
  --surface: var(--hueso);
  --surface-raised: #fffdfa;
  --surface-sunken: var(--gris-100);
  --surface-inverse: var(--taupe);
  --ink: var(--taupe);
  --ink-muted: var(--gris-600);
  --ink-inverse: var(--hueso);
  --line: var(--gris-200);
  --line-strong: #8c8375;
  --accent: var(--berenjena);
  --accent-hover: var(--berenjena-600);
  --accent-active: var(--berenjena-700);
  --accent-soft: var(--berenjena-100);
  --accent-ink: var(--berenjena);
  --on-accent: #ffffff;
  --focus-ring: var(--berenjena);
  --success: #2e6a62;
  --success-soft: #e3efec;
  --warning: #855f12;
  --warning-soft: #f6eedb;
  --danger: #a33a3a;
  --danger-soft: #f7e6e4;
  --shadow-sm: 0 1px 2px rgba(61, 55, 47, 0.06);
  --shadow-md: 0 8px 24px rgba(61, 55, 47, 0.08);
}

[data-theme="dark"] {
  --surface: #27231e;
  --surface-raised: #322d27;
  --surface-sunken: #1e1b17;
  --surface-inverse: var(--hueso);
  --ink: #f1ece4;
  --ink-muted: var(--gris-calido);
  --ink-inverse: var(--taupe);
  --line: #453e35;
  --accent: var(--berenjena-300);
  --accent-hover: #d8bacb;
  --accent-active: #b58ca3;
  --accent-soft: #3d2c36;
  --accent-ink: var(--berenjena-300);
  --on-accent: #27231e;
  --focus-ring: var(--berenjena-300);
  --success: #8cc7bd;
  --success-soft: #1f3531;
  --warning: #e0bd6e;
  --warning-soft: #3a3020;
  --danger: #f0a3a3;
  --danger-soft: #3e2424;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #27231e;
    --surface-raised: #322d27;
    --surface-sunken: #1e1b17;
    --surface-inverse: var(--hueso);
    --ink: #f1ece4;
    --ink-muted: var(--gris-calido);
    --ink-inverse: var(--taupe);
    --line: #453e35;
    --accent: var(--berenjena-300);
    --accent-hover: #d8bacb;
    --accent-active: #b58ca3;
    --accent-soft: #3d2c36;
    --accent-ink: var(--berenjena-300);
    --on-accent: #27231e;
    --focus-ring: var(--berenjena-300);
    --success: #8cc7bd;
    --success-soft: #1f3531;
    --warning: #e0bd6e;
    --warning-soft: #3a3020;
    --danger: #f0a3a3;
    --danger-soft: #3e2424;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

: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;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --container: 1120px;
  --container-narrow: 720px;
  --measure: 68ch;
  --gutter: 24px;
  --stroke-hairline: 1px;
  --stroke-control: 1.5px;
  --stroke-focus: 2px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
}

/* Estilos de texto */
.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 360; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 44px; line-height: 50px; font-weight: 360; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 420; letter-spacing: -0.005em; }
.h4 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 28px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 17px; line-height: 28px; font-weight: 600; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; }
.overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }