/*
  TacticoTextil — Design tokens
  Breakpoints de referencia (no custom properties, se usan directamente en media queries):
  360, 390, 430, 768, 1024, 1280, 1440, 1920
*/

:root {
  /* --- Color --- */
  --c-ink: #101113;
  --c-graphite-900: #17181c;
  --c-graphite-800: #212327;
  --c-graphite-700: #34363b;
  --c-graphite-500: #5b5e64;

  --c-white: #ffffff;
  --c-paper: #f7f6f3;
  --c-gray-100: #eeece7;
  --c-gray-200: #e2dfd8;
  --c-gray-300: #c9c6bd;

  --c-red-700: #a11722;
  --c-red-600: #c81f2b;
  --c-red-500: #e0303c;
  --c-red-tint: #fbe9e9;

  --c-earth-700: #6f4e33;
  --c-earth-500: #9c7449;
  --c-earth-300: #c9ab84;

  --c-success: #2f7a4d;
  --c-error: #c81f2b;

  /* Roles semanticos */
  --color-bg: var(--c-paper);
  --color-bg-alt: var(--c-white);
  --color-surface-dark: var(--c-graphite-900);
  --color-text: var(--c-ink);
  --color-text-inverse: var(--c-white);
  --color-text-muted: var(--c-graphite-500);
  --color-border: var(--c-gray-200);
  --color-accent: var(--c-red-600);
  --color-accent-hover: var(--c-red-700);

  /* --- Tipografia --- */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.375rem;
  --fs-600: 1.75rem;
  --fs-700: 2.25rem;
  --fs-800: 3rem;
  --fs-900: 4.25rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* --- Espaciado (base 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Contenedores --- */
  --container-max: 1320px;
  --container-narrow: 780px;
  --container-pad: 1.25rem;

  /* --- Bordes y sombra --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 17, 19, 0.06), 0 1px 1px rgba(16, 17, 19, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 17, 19, 0.10);
  --shadow-lg: 0 20px 48px rgba(16, 17, 19, 0.16);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-pad: 2.5rem;
  }
}