/* ============================================================
   ACTIVA 90 — Design Tokens
   Single source of truth for all visual values
   ============================================================ */

:root {
  /* ── Brand Colors (from Colores Activa 90.jpeg) ─────────── */
  --color-primary:        #A8001C;
  --color-primary-dark:   #7A0015;
  --color-primary-hover:  #8f0018;
  --color-primary-light:  rgba(168, 0, 28, 0.08);
  --color-primary-muted:  rgba(168, 0, 28, 0.15);
  --color-gray-light:     #9B9B9B;
  --color-gray-mid:       #5C5C5C;
  --color-offwhite:       #F5F0EB;
  --color-black:          #0D0D0D;
  --color-white:          #FFFFFF;

  /* ── Semantic Aliases ───────────────────────────────────── */
  --color-bg:             #f2f2f2;
  --color-surface:        var(--color-white);
  --color-surface-raised: #FDFBF9;
  --color-text:           var(--color-black);
  --color-text-muted:     var(--color-gray-mid);
  --color-text-subtle:    var(--color-gray-light);
  --color-border:         #E4DDD6;
  --color-border-light:   #EDE8E2;
  --color-success:        #1A7A40;
  --color-success-bg:     #EAF5EE;
  --color-success-border: #A3D9B5;
  --color-warning:        #B45309;
  --color-warning-bg:     #FEF3C7;
  --color-error:          #B91C1C;
  --color-error-bg:       #FEE2E2;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:          'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.6875rem;  /* 11px */
  --font-size-sm:         0.8125rem;  /* 13px */
  --font-size-base:       0.9375rem;  /* 15px */
  --font-size-md:         1.0625rem;  /* 17px */
  --font-size-lg:         1.25rem;    /* 20px */
  --font-size-xl:         1.5rem;     /* 24px */
  --font-size-2xl:        1.875rem;   /* 30px */
  --font-size-3xl:        2.25rem;    /* 36px */
  --font-size-4xl:        3rem;       /* 48px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;
  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.8;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(13, 13, 13, 0.06);
  --shadow-sm:    0 1px 4px rgba(13, 13, 13, 0.08), 0 1px 2px rgba(13, 13, 13, 0.04);
  --shadow-md:    0 4px 12px rgba(13, 13, 13, 0.10), 0 2px 4px rgba(13, 13, 13, 0.05);
  --shadow-lg:    0 8px 24px rgba(13, 13, 13, 0.12), 0 4px 8px rgba(13, 13, 13, 0.05);
  --shadow-xl:    0 20px 48px rgba(13, 13, 13, 0.14), 0 8px 16px rgba(13, 13, 13, 0.06);
  --shadow-primary: 0 4px 16px rgba(168, 0, 28, 0.25);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     1;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:        1200px;
  --max-width-sm:     780px;
  --header-height:    64px;
  --sidebar-width:    260px;
  --content-padding:  var(--space-8);
}

@media (max-width: 768px) {
  :root {
    --content-padding: var(--space-4);
    --font-size-4xl:   2.25rem;
    --font-size-3xl:   1.875rem;
    --font-size-2xl:   1.5rem;
  }
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:             #121212;
  --color-surface:        #1E1E1E;
  --color-surface-raised: #2A2A2A;
  --color-text:           #F5F0EB;
  --color-text-muted:     #A0A0A0;
  --color-text-subtle:    #6B6B6B;
  --color-border:         #3A3A3A;
  --color-border-light:   #2E2E2E;

  /* Adjusted semantic colors for dark mode */
  --color-success-bg:     rgba(26, 122, 64, 0.15);
  --color-success-border: rgba(26, 122, 64, 0.4);
  --color-warning-bg:     rgba(180, 83, 9, 0.15);
  --color-error-bg:       rgba(185, 28, 28, 0.15);

  /* Shadows adjusted for dark mode */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl:    0 20px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.4);
}