/* =========================================================
   Crearte Web — Design Tokens
   Fuente: .claude/skills/crearte-web/references/design-tokens.md
   ========================================================= */

:root {
  /* === Marca === */
  --color-primary:        #004156;
  --color-primary-dark:   #002F3F;
  --color-primary-medium: #006A85;
  --color-secondary:      #74C4C7;
  --color-secondary-dark: #0F6E70;
  --color-accent:         #E56001;
  --color-accent-dark:    #B84D01;

  /* === Gradiente de marca === */
  --gradient-brand: linear-gradient(135deg, #004156 0%, #74C4C7 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(0, 65, 86, 0.08) 0%, rgba(116, 196, 199, 0.12) 100%);
  --gradient-accent: linear-gradient(135deg, #E56001 0%, #FF8533 100%);

  /* === Neutros === */
  --color-ink:        #0F1F2A;
  --color-ink-soft:   #3A4A55;
  --color-muted:      #6B7480;
  --color-line:       #E2E5E9;
  --color-line-soft:  #EEF1F4;
  --color-surface:    #F5F7F9;
  --color-surface-2:  #EAF0F3;
  --color-bg:         #FFFFFF;

  /* === Semánticos === */
  --color-success: #16A34A;
  --color-error:   #DC2626;
  --color-warning: #E5A101;
  --color-info:    #006A85;

  /* === Tipografía === */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:  'Instrument Serif', Georgia, serif;

  /* === Escala tipográfica === */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.1rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.5rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* === Espaciado === */
  --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;
  --space-32: 8rem;
  --space-40: 10rem;

  /* === Radios === */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* === Sombras === */
  --shadow-sm:  0 1px 2px rgba(15, 31, 42, 0.06);
  --shadow-md:  0 4px 12px rgba(15, 31, 42, 0.08);
  --shadow-lg:  0 12px 32px rgba(15, 31, 42, 0.10);
  --shadow-xl:  0 24px 60px rgba(15, 31, 42, 0.14);
  --shadow-glow: 0 0 60px rgba(116, 196, 199, 0.45);

  /* === Layout === */
  --container-max:  1200px;
  --container-wide: 1320px;
  --container-text: 720px;
  --gutter: var(--space-6);

  /* === Transiciones === */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  /* === Z-index === */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}