/* ============================================================
   MedAlerta — Design Tokens
   Todas as variáveis de design do sistema
   ============================================================ */

:root {
  /* ── Paleta Principal ────────────────────────────── */
  --color-primary-50:  hsl(199, 89%, 95%);
  --color-primary-100: hsl(199, 89%, 88%);
  --color-primary-200: hsl(199, 89%, 75%);
  --color-primary-300: hsl(199, 89%, 62%);
  --color-primary-400: hsl(199, 89%, 55%);
  --color-primary-500: hsl(199, 89%, 48%);  /* brand */
  --color-primary-600: hsl(199, 89%, 40%);
  --color-primary-700: hsl(199, 89%, 32%);
  --color-primary-800: hsl(199, 89%, 24%);
  --color-primary-900: hsl(199, 89%, 16%);

  /* ── Semânticas ──────────────────────────────────── */
  --color-success-400: hsl(142, 71%, 55%);
  --color-success-500: hsl(142, 71%, 45%);
  --color-success-600: hsl(142, 71%, 35%);
  --color-success-100: hsl(142, 71%, 93%);

  --color-warning-400: hsl(38, 92%, 60%);
  --color-warning-500: hsl(38, 92%, 50%);
  --color-warning-600: hsl(38, 92%, 40%);
  --color-warning-100: hsl(38, 92%, 93%);

  --color-danger-400: hsl(4, 86%, 68%);
  --color-danger-500: hsl(4, 86%, 58%);
  --color-danger-600: hsl(4, 86%, 48%);
  --color-danger-100: hsl(4, 86%, 95%);

  --color-info-400: hsl(211, 100%, 60%);
  --color-info-500: hsl(211, 100%, 50%);
  --color-info-100: hsl(211, 100%, 95%);

  /* ── Neutros ─────────────────────────────────────── */
  --color-neutral-0:   hsl(0, 0%, 100%);
  --color-neutral-50:  hsl(210, 20%, 98%);
  --color-neutral-100: hsl(210, 17%, 95%);
  --color-neutral-200: hsl(210, 14%, 89%);
  --color-neutral-300: hsl(210, 12%, 80%);
  --color-neutral-400: hsl(210, 10%, 65%);
  --color-neutral-500: hsl(210, 8%, 50%);
  --color-neutral-600: hsl(210, 9%, 38%);
  --color-neutral-700: hsl(210, 12%, 26%);
  --color-neutral-800: hsl(214, 15%, 18%);
  --color-neutral-900: hsl(220, 20%, 10%);
  --color-neutral-950: hsl(222, 25%, 7%);

  /* ── Status de Dose ──────────────────────────────── */
  --status-taken:    var(--color-success-500);
  --status-pending:  var(--color-warning-500);
  --status-missed:   var(--color-danger-500);
  --status-upcoming: var(--color-primary-500);
  --status-skipped:  var(--color-neutral-400);

  /* ── Tipografia ──────────────────────────────────── */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --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.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.8;

  /* ── Espaçamento ─────────────────────────────────── */
  --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 */
  --space-20: 5rem;      /* 80px */

  /* ── Border Radius ───────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.14);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── Transições ──────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ─────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* ── Tamanhos de Layout ──────────────────────────── */
  --nav-height:      64px;
  --bottom-nav-height: 68px;
  --sidebar-width:   280px;
  --content-max-width: 600px;
  --fab-size:        56px;
}