/*
 * Leomak.Soft — Design system "Software de guarda" (Luna, 2026-10-15)
 * Tokens semánticos: las páginas usan SOLO estas variables (nada de valores sueltos).
 * Contraste AA verificado (ver typography-guide.md / README.md).
 */

/* ---------- Tipografías autoalojadas (Google Fonts, licencia OFL — ver fonts/LICENCIAS.md) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Paleta base (no usar directo en páginas: usar los semánticos de abajo) ---------- */
  --raw-orujo-950: #1d1018;   /* casi negro con fondo de vino */
  --raw-orujo-900: #2a1722;
  --raw-orujo-800: #3a2130;
  --raw-malbec-700: #7b1e45;  /* color de marca */
  --raw-malbec-500: #c4426f;  /* malbec vivo: solo decorativo / elementos grandes */
  --raw-rosado-300: #f0a3bd;
  --raw-cobre-400: #d59a52;   /* cobre de barrica */
  --raw-cobre-700: #8a5418;
  --raw-hueso-50: #f8f2eb;
  --raw-hueso-100: #efe5da;
  --raw-hueso-200: #e4d6c8;
  --raw-tinta-600: #5b4752;

  /* ---------- Color semántico ---------- */
  --color-brand-primary: var(--raw-malbec-700);
  --color-brand-vivid: var(--raw-malbec-500);
  --color-brand-accent: var(--raw-cobre-400);
  --color-brand-accent-strong: var(--raw-cobre-700);

  --color-surface-base: var(--raw-hueso-50);
  --color-surface-raised: #fffaf4;
  --color-surface-sunken: var(--raw-hueso-100);
  --color-surface-inverse: var(--raw-orujo-950);
  --color-surface-inverse-raised: var(--raw-orujo-900);
  --color-surface-brand: var(--raw-malbec-700);

  --color-text-primary: var(--raw-orujo-950);          /* 16.6:1 sobre hueso */
  --color-text-secondary: var(--raw-tinta-600);        /* 7.6:1 sobre hueso */
  --color-text-brand: var(--raw-malbec-700);           /* 8.9:1 sobre hueso */
  --color-text-accent: var(--raw-cobre-700);           /* 5.6:1 sobre hueso */
  --color-text-inverse: var(--raw-hueso-50);           /* 16.6:1 sobre orujo */
  --color-text-inverse-secondary: #cdb9c3;             /* 9.9:1 sobre orujo */
  --color-text-inverse-brand: var(--raw-rosado-300);   /* 9.4:1 sobre orujo */
  --color-text-inverse-accent: var(--raw-cobre-400);   /* 7.5:1 sobre orujo */

  --color-border-subtle: var(--raw-hueso-200);         /* decorativo */
  --color-border-strong: var(--raw-tinta-600);         /* inputs: 7.6:1 (WCAG 1.4.11) */
  --color-border-inverse: #4d3242;

  /* Código (editor 3D y fondo "código vivo"): contraste ≥ 6.4:1 sobre --color-code-bg */
  --color-code-bg: #160b12;
  --color-code-text: var(--raw-hueso-100);
  --color-code-keyword: var(--raw-rosado-300);
  --color-code-type: var(--raw-cobre-400);
  --color-code-function: #f5d7a1;
  --color-code-comment: #a8929e;
  --color-code-number: #ffb38a;
  --color-code-annotation: #e88aab;

  --color-focus-ring: var(--raw-cobre-400);
  --color-focus-ring-inner: var(--raw-orujo-950);
  --color-success: #1f6b4a;
  --color-danger: #a3243b;

  /* ---------- Tipografía ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala fluida 320 → 1440 px */
  --text-body-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-body-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-label: 0.8125rem;
  --text-heading-sm: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-heading-md: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --text-heading-lg: clamp(2.125rem, 1.7rem + 2.1vw, 3.5rem);
  --text-heading-xl: clamp(2.75rem, 1.9rem + 4.4vw, 6rem);

  --weight-body: 420;
  --weight-strong: 600;
  --weight-display: 560;
  --weight-display-light: 380;
  --soft-display: 100;          /* eje SOFT de Fraunces: terminaciones redondeadas */
  --leading-tight: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.62;
  --tracking-label: 0.14em;
  --tracking-display: -0.02em;
  --measure-text: 64ch;

  /* ---------- Espaciado (escala 4 px) ---------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --space-component-gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --space-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --layout-max: 76rem;
  --layout-narrow: 46rem;

  /* ---------- Forma ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --touch-target: 2.75rem;      /* 44 px */

  /* ---------- Sombras (tintadas en orujo, nunca gris neutro) ---------- */
  --shadow-sm: 0 1px 2px rgb(29 16 24 / 0.08), 0 1px 1px rgb(29 16 24 / 0.04);
  --shadow-md: 0 6px 18px -6px rgb(29 16 24 / 0.18), 0 2px 6px rgb(29 16 24 / 0.06);
  --shadow-lg: 0 24px 48px -16px rgb(29 16 24 / 0.28), 0 6px 14px rgb(29 16 24 / 0.08);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring-inner), 0 0 0 6px var(--color-focus-ring);

  /* ---------- Motion "decantar" (ver motion-guide.md) ---------- */
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 220ms;
  --motion-duration-base: 420ms;
  --motion-duration-slow: 760ms;
  --motion-duration-settle: 1100ms;
  --motion-easing-settle: cubic-bezier(0.22, 0.8, 0.24, 1);    /* decanta: rápido y se asienta suave */
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-press: cubic-bezier(0.3, 0, 0.5, 1);
  --motion-distance-settle: 18px;
  --motion-stagger: 90ms;
  --motion-duration-loop-slow: 48s;    /* franja de servicios */
  --motion-duration-float: 6s;         /* chips flotantes del editor */
  --motion-perspective: 1400px;

  /* ---------- Capas ---------- */
  --z-header: 50;
  --z-skip: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
    --motion-duration-slow: 1ms;
    --motion-duration-settle: 1ms;
    --motion-distance-settle: 0px;
    --motion-stagger: 0ms;
    --motion-duration-loop-slow: 0s;
    --motion-duration-float: 0s;
  }
}