/*
 * Custom Design Tokens — Generated by WP Theme Base Agent
 * IMPORTANT: This file ONLY defines CSS variables. All CSS rules come from main.css.
 * Variable names MUST match those expected by main.css and style.css.
 */

:root {
  /* ─── Brand Colors ─────────────────────────────────────── */
  --color-primary:          #ee7416;
  --color-primary-dark:     #c75e0e;
  --color-primary-light:    #f8d0a0;
  --color-primary-subtle:   color-mix(in srgb, #ee7416 12%, white);
  --color-secondary:        #f8b820;
  --color-secondary-dark:   color-mix(in srgb, #f8b820 85%, black);
  --color-secondary-light:  color-mix(in srgb, #f8b820 70%, white);
  --color-secondary-subtle: color-mix(in srgb, #f8b820 12%, white);
  --color-accent:           #000000;
  --color-accent-dark:      color-mix(in srgb, #000000 80%, black);
  --color-accent-light:     color-mix(in srgb, #000000 40%, white);

  /* ─── Neutrals (escala fija, independiente de la marca) ── */
  --color-neutral-900:      #111827;
  --color-neutral-800:      #1F2937;
  --color-neutral-700:      #374151;
  --color-neutral-600:      #4B5563;
  --color-neutral-500:      #6B7280;
  --color-neutral-400:      #9CA3AF;
  --color-neutral-300:      #D1D5DB;
  --color-neutral-200:      #E5E7EB;
  --color-neutral-100:      #F3F4F6;
  --color-neutral-50:       #F9FAFB;

  /* ─── Semantic ─────────────────────────────────────────── */
  --color-success:          #10B981;
  --color-success-subtle:   #ECFDF5;
  --color-warning:          #F59E0B;
  --color-warning-subtle:   #FFFBEB;
  --color-error:            #EF4444;
  --color-error-subtle:     #FEF2F2;
  --color-info:             #3B82F6;
  --color-info-subtle:      #EFF6FF;

  /* ─── Base Colors ──────────────────────────────────────── */
  --color-white:            #FFFFFF;
  --color-black:            #000000;
  --color-body-bg:          #ffffff;
  --color-body-text:        #333333;
  --color-heading:          #111827;
  --color-muted:            #777777;
  --color-border:           #dddddd;
  --color-link:             var(--color-primary);
  --color-link-hover:       var(--color-primary-dark);
  --color-selection-bg:     var(--color-primary);
  --color-selection-text:   var(--color-white);

  /* ─── Typography ───────────────────────────────────────── */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:    'Georgia', 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --font-size-base:         16px;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:    1.25;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.625;
  --line-height-loose:    2;

  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* ─── Spacing (--space-N, no --spacing-N) ──────────────── */
  --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;

  /* ─── Layout ───────────────────────────────────────────── */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --header-height:          70px;
  --header-height-scrolled: 60px;

  /* ─── Borders & Radius ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   16px;
  --radius-2xl:  calc(16px * 1.5);
  --radius-full: 9999px;
  --border-width: 1px;

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow:       0 2px 8px rgba(0,0,0,.12);
  --shadow-md:    0 2px 8px rgba(0,0,0,.12);
  --shadow-lg:    0 4px 16px rgba(0,0,0,.15);
  --shadow-xl:    0 8px 32px rgba(0,0,0,.18);
  --shadow-2xl:   0 8px 32px rgba(0,0,0,.18);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* ─── Transitions ──────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    300ms ease;
  --transition-slower:  500ms ease;

  /* ─── Z-index ───────────────────────────────────────────── */
  --z-hide:     -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    700;
  --z-top:      999;

  /* ─── Dark Mode Tokens ─────────────────────────────────── */
  --dm-bg:           #0F172A;
  --dm-surface:      #1E293B;
  --dm-text:         #F1F5F9;
  --dm-text-muted:   #94A3B8;
  --dm-border:       #334155;
  --dm-heading:      #F8FAFC;
}

/* ─── Dark Mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --color-body-bg:   var(--dm-bg);
    --color-body-text: var(--dm-text);
    --color-heading:   var(--dm-heading);
    --color-muted:     var(--dm-text-muted);
    --color-border:    var(--dm-border);
  }
}

.dark-mode {
  --color-body-bg:   var(--dm-bg);
  --color-body-text: var(--dm-text);
  --color-heading:   var(--dm-heading);
  --color-muted:     var(--dm-text-muted);
  --color-border:    var(--dm-border);
}