/* ==========================================================================
   Zero PDF - Design System Tokens (Light Mode - Instrument Sans & Tactile Craft)
   Strict compliance: WCAG 2.2 AA / AAA contrast, 48px touch targets, mobile-first 390px.
   Brand rules: Zero emojis, zero text gradients, zero overused fonts, strict design tokens.
   ========================================================================== */

:root {
  /* Color Palette - Light Mode (Clean, Warm Editorial, High Contrast) */
  --color-bg-canvas: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-surface-elevated: #ffffff;
  --color-bg-subtle: #f1f5f9;
  --color-bg-inset: #e2e8f0;
  
  --color-border-subtle: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-tactile: #94a3b8;
  --color-border-focus: #2563eb;

  /* 21st.dev High-Craft Tokens (Precision Canvas & Bevel Highlights) */
  --canvas-dot-color: rgba(148, 163, 184, 0.24);
  --canvas-grid-size: 24px;
  --spotlight-glow: rgba(37, 99, 235, 0.07);
  --bevel-light: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --bevel-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);

  /* Typography Colors (All exceeding WCAG 2.2 AA 4.5:1 & AAA 7:1) */
  --color-text-primary: #0f172a;       /* Deep slate ink - contrast > 14:1 */
  --color-text-secondary: #334155;     /* Slate body - contrast > 8:1 */
  --color-text-tertiary: #475569;      /* Supporting meta - contrast > 5.5:1 */
  --color-text-inverted: #ffffff;

  /* Conversion Accent (Deep Royal Cobalt) */
  --color-accent-primary: #1d4ed8;
  --color-accent-hover: #1e40af;
  --color-accent-active: #172554;
  --color-accent-contrast: #ffffff;

  /* Tactile Button Tokens (Physical, Crafted Instrument Aesthetic) */
  --btn-primary-bg: #0f172a;
  --btn-primary-hover: #1e293b;
  --btn-primary-active: #020617;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.14);

  --btn-tactile-bg: #ffffff;
  --btn-tactile-hover: #f8fafc;
  --btn-tactile-border: #cbd5e1;
  --btn-tactile-text: #0f172a;
  --btn-tactile-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Status Colors */
  --color-status-success-bg: #ecfdf5;
  --color-status-success-text: #065f46;
  --color-status-success-border: #a7f3d0;
  
  --color-status-warning-bg: #fffbeb;
  --color-status-warning-text: #92400e;
  --color-status-warning-border: #fde68a;

  --color-status-danger-bg: #fef2f2;
  --color-status-danger-text: #991b1b;
  --color-status-danger-border: #fecaca;

  /* Typography Scales: Sora (Geometric Precision Display) & Archivo (Editorial Body) */
  --font-family-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-base: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-xs: 0.75rem;     /* 12px - Absolute floor for microcopy */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px - Base (prevents iOS Safari zoom on tap) */
  --font-size-md: 1.125rem;    /* 18px */
  --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-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.65;

  /* Spacing Scale with Rhythmic Variation */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */

  /* Touch Targets (WCAG 2.2 AA Minimum 48px) */
  --touch-target-min: 48px;
  --touch-target-lg: 52px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Functional Pastel Tints (Super-Tarjetas Craft) */
  --tint-mint-bg: #ecfdf5;
  --tint-mint-border: #a7f3d0;
  --tint-mint-text: #047857;

  --tint-lavender-bg: #f5f3ff;
  --tint-lavender-border: #ddd6fe;
  --tint-lavender-text: #6d28d9;

  --tint-peach-bg: #fff7ed;
  --tint-peach-border: #fed7aa;
  --tint-peach-text: #c2410c;

  --tint-butter-bg: #fefce8;
  --tint-butter-border: #fef08a;
  --tint-butter-text: #854d0e;

  --tint-sky-bg: #f0f9ff;
  --tint-sky-border: #bae6fd;
  --tint-sky-text: #0369a1;

  /* Elevations (Refined directional drop shadows with soft blur and offset) */
  --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-tactile-card: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-tactile-hover: 0 14px 28px -4px rgba(15, 23, 42, 0.08), 0 6px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-elevated: 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-modal: 0 16px 28px -6px rgba(15, 23, 42, 0.12);

  /* iOS Safe Area insets */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-ad: 200;
  --z-modal-backdrop: 500;
  --z-modal-content: 510;
  --z-notification: 999;
}