/* ══════════════════════════════════════════════════════
   Life App — Design Tokens (Editorial Theme)
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Typography ─────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.6875rem;    /* 11px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.375rem;     /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: 2.25rem;     /* 36px */

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

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── 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-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Border Radius ──────────────────────────────── */
  /* FLAT EDITORIAL STYLE */
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: none;

  /* ── Transitions ────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Z-index scale ──────────────────────────────── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-fab: 600;

  /* ── Layout ─────────────────────────────────────── */
  --sidebar-width: 260px;
  --header-height: 60px;
  --max-content-width: 2400px;
  --container-padding: var(--space-6);

  /* ── Light Theme (Editorial) ────────────────────── */
  --bg-base: #F4EFEA;
  --bg-surface: #F4EFEA;
  --bg-elevated: #EFE9E2;
  --bg-hover: #E8DED4;
  --bg-active: #E0D3C6;

  --border: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.04);
  --border-accent: rgba(194, 65, 12, 0.4);

  --text-primary: #1C1917;
  --text-secondary: #78716C;
  --text-muted: #A8A29E;
  --text-inverse: #FFFFFF;
  --bg-inverse: #1C1917; /* pairs with --text-inverse for selected pills/tabs */

  --accent: #1C1917; /* Black buttons */
  --accent-hover: #44403C;
  --accent-subtle: rgba(28, 25, 23, 0.10);
  --accent-muted: rgba(28, 25, 23, 0.05);

  --success: #15803D;
  --success-subtle: rgba(21, 128, 61, 0.10);
  --warning: #C2410C;
  --warning-subtle: rgba(194, 65, 12, 0.10);
  --danger: #B91C1C;
  --danger-subtle: rgba(185, 28, 28, 0.10);
  --info: #0369A1;
  --info-subtle: rgba(3, 105, 161, 0.10);

  --priority-alta: #B91C1C;
  --priority-media: #C2410C;
  --priority-baja: #78716C;

  --gradient-accent: linear-gradient(135deg, #44403C 0%, #1C1917 100%);
  --gradient-surface: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%);
}

/* ══════════════════════════════════════════════════════
   DARK THEME (Optional)
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-base: #0D0F14;
  --bg-surface: #161821;
  --bg-elevated: #1C1E28;
  --bg-hover: #22242F;
  --bg-active: #282A36;

  --border: #2A2D3A;
  --border-subtle: #1F2230;
  --border-accent: rgba(91, 140, 255, 0.3);

  --text-primary: #E8EAF0;
  --text-secondary: #9BA1B5;
  --text-muted: #5C6175;
  --text-inverse: #0D0F14;
  --bg-inverse: #E8EAF0;

  --accent: #5B8CFF;
  --accent-hover: #7BA3FF;
  --accent-subtle: rgba(91, 140, 255, 0.12);
  --accent-muted: rgba(91, 140, 255, 0.06);

  --success: #34D399;
  --success-subtle: rgba(52, 211, 153, 0.12);
  --warning: #FBBF24;
  --warning-subtle: rgba(251, 191, 36, 0.12);
  --danger: #F87171;
  --danger-subtle: rgba(248, 113, 113, 0.12);
  --info: #60A5FA;
  --info-subtle: rgba(96, 165, 250, 0.12);

  --priority-alta: #F87171;
  --priority-media: #FBBF24;
  --priority-baja: #5C6175;

  --gradient-accent: linear-gradient(135deg, #5B8CFF 0%, #7C5CFC 100%);
  --gradient-surface: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
}

/* ══════════════════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════════════════ */
html {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
}

body {
  background: var(--bg-base);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--accent);
  color: var(--text-inverse);
}