/* ==========================================================================
   PH CORE Design System — ph-core.css
   Versão: 1.0.0
   Fundação: Reset + Tokens + Base styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET CSS MODERNO
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   GOOGLE FONTS — INTER
   -------------------------------------------------------------------------- */
/* Google Fonts CDN removed per Rule 30. System font fallback in --ph-font-sans token. */

/* --------------------------------------------------------------------------
   DESIGN TOKENS — VARIÁVEIS CSS
   -------------------------------------------------------------------------- */
:root {

  /* ----------------------------------------------------------------
     CORES DA MARCA (Purple / Violet)
     ---------------------------------------------------------------- */
  --ph-primary-50:  #FAF5FF;
  --ph-primary-100: #EDE9FE;
  --ph-primary-200: #DDD6FE;
  --ph-primary-300: #C4B5FD;
  --ph-primary-400: #A78BFA;
  --ph-primary-500: #8B5CF6;
  --ph-primary-600: #7C3AED;  /* COR PRINCIPAL */
  --ph-primary-700: #6D28D9;
  --ph-primary-800: #5B21B6;
  --ph-primary-900: #4C1D95;

  /* ----------------------------------------------------------------
     CORES SEMÂNTICAS
     ---------------------------------------------------------------- */
  --ph-success-50:  #ECFDF5;
  --ph-success-100: #D1FAE5;
  --ph-success-200: #A7F3D0;
  --ph-success-500: #10B981;
  --ph-success-600: #059669;
  --ph-success-700: #047857;

  --ph-warning-50:  #FFFBEB;
  --ph-warning-100: #FEF3C7;
  --ph-warning-200: #FDE68A;
  --ph-warning-500: #F59E0B;
  --ph-warning-600: #D97706;
  --ph-warning-700: #B45309;

  --ph-danger-50:  #FEF2F2;
  --ph-danger-100: #FEE2E2;
  --ph-danger-200: #FECACA;
  --ph-danger-500: #EF4444;
  --ph-danger-600: #DC2626;
  --ph-danger-700: #B91C1C;

  --ph-info-50:  #EFF6FF;
  --ph-info-100: #DBEAFE;
  --ph-info-200: #BFDBFE;
  --ph-info-500: #3B82F6;
  --ph-info-600: #2563EB;
  --ph-info-700: #1D4ED8;

  /* ----------------------------------------------------------------
     ESCALA DE CINZA
     ---------------------------------------------------------------- */
  --ph-gray-50:  #F9FAFB;
  --ph-gray-100: #F3F4F6;
  --ph-gray-200: #E5E7EB;
  --ph-gray-300: #D1D5DB;
  --ph-gray-400: #9CA3AF;
  --ph-gray-500: #6B7280;
  --ph-gray-600: #4B5563;
  --ph-gray-700: #374151;
  --ph-gray-800: #1F2937;
  --ph-gray-900: #111827;

  /* ----------------------------------------------------------------
     CORES SEMÂNTICAS DE SUPERFÍCIE
     ---------------------------------------------------------------- */
  --ph-bg:          #F4F5F9;     /* fundo geral da página */
  --ph-surface:     #FFFFFF;     /* cards, painéis, modais */
  --ph-surface-alt: #F9FAFB;    /* fundo alternativo de surface */
  --ph-overlay:     rgba(0, 0, 0, 0.5);

  --ph-text:        #111827;     /* texto principal */
  --ph-text-muted:  #6B7280;    /* texto secundário / labels */
  --ph-text-subtle: #9CA3AF;    /* texto placeholder / hints */
  --ph-text-invert: #FFFFFF;    /* texto em fundos escuros */

  --ph-border:      #E5E7EB;    /* bordas padrão */
  --ph-border-strong: #D1D5DB; /* bordas enfatizadas */
  --ph-border-focus: #7C3AED;  /* borda de foco (primary) */

  --ph-link:        #7C3AED;
  --ph-link-hover:  #6D28D9;

  /* ----------------------------------------------------------------
     TIPOGRAFIA
     ---------------------------------------------------------------- */
  --ph-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Helvetica, Arial, sans-serif;
  --ph-font-mono:   'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Escalas de tamanho */
  --ph-text-xs:   0.75rem;    /* 12px */
  --ph-text-sm:   0.875rem;   /* 14px */
  --ph-text-base: 1rem;       /* 16px */
  --ph-text-lg:   1.125rem;   /* 18px */
  --ph-text-xl:   1.25rem;    /* 20px */
  --ph-text-2xl:  1.5rem;     /* 24px */
  --ph-text-3xl:  1.875rem;   /* 30px */
  --ph-text-4xl:  2.25rem;    /* 36px */
  --ph-text-5xl:  3rem;       /* 48px */

  /* Pesos */
  --ph-font-light:    300;
  --ph-font-normal:   400;
  --ph-font-medium:   500;
  --ph-font-semibold: 600;
  --ph-font-bold:     700;
  --ph-font-extrabold:800;

  /* Line heights */
  --ph-leading-none:    1;
  --ph-leading-tight:   1.25;
  --ph-leading-snug:    1.375;
  --ph-leading-normal:  1.5;
  --ph-leading-relaxed: 1.625;
  --ph-leading-loose:   2;

  /* Letter spacing */
  --ph-tracking-tight:  -0.025em;
  --ph-tracking-normal: 0;
  --ph-tracking-wide:   0.025em;
  --ph-tracking-wider:  0.05em;
  --ph-tracking-widest: 0.1em;

  /* ----------------------------------------------------------------
     ESPAÇAMENTOS (base 4px)
     ---------------------------------------------------------------- */
  --ph-space-0:  0;
  --ph-space-1:  0.25rem;   /* 4px */
  --ph-space-2:  0.5rem;    /* 8px */
  --ph-space-3:  0.75rem;   /* 12px */
  --ph-space-4:  1rem;      /* 16px */
  --ph-space-5:  1.25rem;   /* 20px */
  --ph-space-6:  1.5rem;    /* 24px */
  --ph-space-7:  1.75rem;   /* 28px */
  --ph-space-8:  2rem;      /* 32px */
  --ph-space-9:  2.25rem;   /* 36px */
  --ph-space-10: 2.5rem;    /* 40px */
  --ph-space-12: 3rem;      /* 48px */
  --ph-space-14: 3.5rem;    /* 56px */
  --ph-space-16: 4rem;      /* 64px */
  --ph-space-20: 5rem;      /* 80px */
  --ph-space-24: 6rem;      /* 96px */

  /* ----------------------------------------------------------------
     RAIOS DE BORDA
     ---------------------------------------------------------------- */
  --ph-radius-none: 0;
  --ph-radius-sm:   0.25rem;   /* 4px */
  --ph-radius-md:   0.5rem;    /* 8px */
  --ph-radius-lg:   0.75rem;   /* 12px */
  --ph-radius-xl:   1rem;      /* 16px */
  --ph-radius-2xl:  1.5rem;    /* 24px */
  --ph-radius-full: 9999px;

  /* ----------------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------------- */
  --ph-shadow-none: none;
  --ph-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --ph-shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.07),
                    0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --ph-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.07),
                    0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --ph-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08),
                    0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --ph-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08),
                    0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --ph-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --ph-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.25);

  /* ----------------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------------- */
  --ph-transition-fast:   all 100ms ease;
  --ph-transition-base:   all 200ms ease;
  --ph-transition-slow:   all 300ms ease;
  --ph-transition-colors: color 200ms ease, background-color 200ms ease,
                          border-color 200ms ease, box-shadow 200ms ease;

  /* ----------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------- */
  --ph-z-base:    0;
  --ph-z-raised:  10;
  --ph-z-dropdown:200;
  --ph-z-sticky:  300;
  --ph-z-overlay: 400;
  --ph-z-modal:   500;
  --ph-z-toast:   600;
  --ph-z-tooltip: 700;

  /* ----------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------- */
  --ph-sidebar-width: 64px;
  --ph-container-sm:  640px;
  --ph-container-md:  768px;
  --ph-container-lg:  1024px;
  --ph-container-xl:  1280px;
}

/* --------------------------------------------------------------------------
   ESTILOS BASE
   -------------------------------------------------------------------------- */
html, body {
  height: 100%;
}

body {
  font-family: var(--ph-font-sans);
  font-size: var(--ph-text-base);
  font-weight: var(--ph-font-normal);
  line-height: var(--ph-leading-normal);
  color: var(--ph-text);
  background-color: var(--ph-bg);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--ph-font-semibold);
  line-height: var(--ph-leading-tight);
  color: var(--ph-text);
}

h1 { font-size: var(--ph-text-4xl); letter-spacing: var(--ph-tracking-tight); }
h2 { font-size: var(--ph-text-3xl); letter-spacing: var(--ph-tracking-tight); }
h3 { font-size: var(--ph-text-2xl); }
h4 { font-size: var(--ph-text-xl); }
h5 { font-size: var(--ph-text-lg); }
h6 { font-size: var(--ph-text-base); }

/* Parágrafos */
p {
  font-size: var(--ph-text-base);
  line-height: var(--ph-leading-relaxed);
  color: var(--ph-text);
}

p + p {
  margin-top: var(--ph-space-4);
}

/* Links */
a {
  color: var(--ph-link);
  text-decoration: none;
  transition: var(--ph-transition-colors);
}

a:hover {
  color: var(--ph-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--ph-border-focus);
  outline-offset: 2px;
  border-radius: var(--ph-radius-sm);
}

/* Lists */
ul, ol {
  padding-left: var(--ph-space-6);
}

li {
  line-height: var(--ph-leading-relaxed);
}

/* Code */
code {
  font-family: var(--ph-font-mono);
  font-size: 0.875em;
  background-color: var(--ph-primary-50);
  color: var(--ph-primary-700);
  padding: 0.1em 0.35em;
  border-radius: var(--ph-radius-sm);
}

pre {
  font-family: var(--ph-font-mono);
  font-size: var(--ph-text-sm);
  background-color: var(--ph-gray-900);
  color: var(--ph-gray-100);
  padding: var(--ph-space-4) var(--ph-space-6);
  border-radius: var(--ph-radius-lg);
  overflow-x: auto;
  line-height: var(--ph-leading-relaxed);
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--ph-border);
  margin: var(--ph-space-6) 0;
}

/* Strong / Em */
strong { font-weight: var(--ph-font-semibold); }
em     { font-style: italic; }

/* Small */
small {
  font-size: var(--ph-text-sm);
  color: var(--ph-text-muted);
}

/* Focus global (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--ph-border-focus);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--ph-primary-200);
  color: var(--ph-primary-900);
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--ph-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--ph-gray-300);
  border-radius: var(--ph-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ph-gray-400);
}