/* ============================================================================
   MUNDO DOS PEPTÍDEOS — DESIGN SYSTEM v27
   ----------------------------------------------------------------------------
   Default: CLEAN (clínico premium) — fundo branco, azul-sky, verde médico
   Variant: DARK — fundo azul-noite, mesma hierarquia, contraste preservado
   Tipografia: Inter (UI) + Fraunces (display, opcional via Google Fonts)
   ============================================================================ */

/* -------------------------------------------------------------------- TOKENS */
:root,
[data-theme="light"] {
  /* — Superfícies ----------------------------------------------------- */
  --color-bg:            #FAFBFC;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #FFFFFF;
  --color-elevated:      #FFFFFF;
  --color-muted:         #F4F6F8;
  --color-overlay:       rgba(15, 23, 42, .45);

  /* — Borders --------------------------------------------------------- */
  --color-border:        #E5E9EE;
  --color-border-strong: #D1D8E0;
  --color-divider:       #EEF1F4;

  /* — Texto ----------------------------------------------------------- */
  --color-text:          #0F172A;
  --color-text-2:        #334155;
  --color-text-3:        #64748B;
  --color-text-muted:    #94A3B8;
  --color-text-on-primary: #FFFFFF;

  /* — Marca / acento -------------------------------------------------- */
  --color-primary:       #0EA5E9;   /* azul-sky clínico */
  --color-primary-hover: #0284C7;
  --color-primary-soft:  #E0F2FE;
  --color-primary-ring:  rgba(14, 165, 233, .25);

  --color-accent:        #10B981;   /* verde médico */
  --color-accent-hover:  #059669;
  --color-accent-soft:   #D1FAE5;

  --color-gold:          #B98A1A;   /* dourado discreto, para selos premium */
  --color-gold-soft:     #FAF3DD;

  --color-pix:           #00BB7C;   /* PIX brand */
  --color-pix-soft:      #D9F7EC;

  /* — Estados --------------------------------------------------------- */
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #0EA5E9;

  /* — Sombras --------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md:  0 4px 8px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg:  0 12px 24px rgba(15, 23, 42, .08), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow-xl:  0 24px 48px rgba(15, 23, 42, .12), 0 8px 16px rgba(15, 23, 42, .06);
  --shadow-ring: 0 0 0 4px var(--color-primary-ring);

  /* — Gradientes premium --------------------------------------------- */
  --grad-hero:    radial-gradient(ellipse at top left, rgba(14, 165, 233, .08), transparent 60%),
                  radial-gradient(ellipse at bottom right, rgba(16, 185, 129, .06), transparent 60%);
  --grad-accent:  linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --grad-gold:    linear-gradient(135deg, #C9A227 0%, #E6C572 100%);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg:            #0B0F1A;
  --color-surface:       #131826;
  --color-surface-2:     #161C2E;
  --color-elevated:      #1A2030;
  --color-muted:         #1F2638;
  --color-overlay:       rgba(0, 0, 0, .65);

  --color-border:        #232B3F;
  --color-border-strong: #2F3A53;
  --color-divider:       #1B2233;

  --color-text:          #F1F5F9;
  --color-text-2:        #CBD5E1;
  --color-text-3:        #94A3B8;
  --color-text-muted:    #64748B;
  --color-text-on-primary: #0B0F1A;

  --color-primary:       #38BDF8;
  --color-primary-hover: #7DD3FC;
  --color-primary-soft:  rgba(56, 189, 248, .12);
  --color-primary-ring:  rgba(56, 189, 248, .35);

  --color-accent:        #34D399;
  --color-accent-hover:  #6EE7B7;
  --color-accent-soft:   rgba(52, 211, 153, .12);

  --color-gold:          #E0B84A;
  --color-gold-soft:     rgba(224, 184, 74, .12);

  --color-pix:           #34D8A4;
  --color-pix-soft:      rgba(52, 216, 164, .12);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, .25);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, .35);
  --shadow-lg:  0 16px 36px rgba(0, 0, 0, .45);
  --shadow-xl:  0 28px 60px rgba(0, 0, 0, .55);

  --grad-hero:    radial-gradient(ellipse at top left, rgba(56, 189, 248, .12), transparent 60%),
                  radial-gradient(ellipse at bottom right, rgba(52, 211, 153, .08), transparent 60%);

  color-scheme: dark;
}

/* -------------------------------------------------------------- TIPOGRAFIA */
:root {
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Inter', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale (fluid) */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  1.875rem;    /* 30 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  clamp(2.5rem, 5vw, 3.5rem);
  --fs-5xl:  clamp(3rem,  7vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.04em;
}

/* ----------------------------------------------------------------- ESPAÇO */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-14: 8rem;
}

/* ----------------------------------------------------------------- RAIO */
:root {
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
}

/* -------------------------------------------------------------- TRANSITIONS */
:root {
  --t-fast:  140ms cubic-bezier(.4, 0, .2, 1);
  --t-base:  220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:  360ms cubic-bezier(.22, 1, .36, 1);
  --t-spring: 480ms cubic-bezier(.34, 1.56, .64, 1);
}

/* ----------------------------------------------------------------- LAYOUT */
:root {
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1340px;

  --header-h:        72px;
  --header-h-mobile: 60px;
  --bottom-nav-h:    64px;

  --z-base:    1;
  --z-dropdown: 10;
  --z-header:  50;
  --z-drawer:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
}

/* ============================================================== RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  font-feature-settings: 'ss01', 'cv11';
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-base), color var(--t-base);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-4); color: var(--color-text-2); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-primary-hover); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

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

::selection {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

/* ====================================================== UTILS */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-7); }
}

.section { padding-block: var(--space-10); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-12); }
}

.text-display { font-family: var(--font-display); }
.text-muted   { color: var(--color-text-3); }
.text-center  { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.divider {
  height: 1px;
  background: var(--color-divider);
  border: 0;
  margin-block: var(--space-7);
}

/* Sr-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Focus ring acessível */
:where(a, button, [role=button], input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}