/* =========================================================================
   Consulta — Design Tokens
   Source: uploads/Style guide.pdf (single-page Figma export, PT-BR medical app)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap');

:root {
  /* -----------------------------------------------------------------------
     Color — Gray scale
     7 steps. Carries the entire UI. Step 1 is darkest text; step 7 is white.
     ----------------------------------------------------------------------- */
  --gray-1: #353535;
  --gray-2: #60636F;
  --gray-3: #7C8592;
  --gray-4: #B4B8C0;
  --gray-5: #EEEEEE;
  --gray-6: #F3F3F3;
  --gray-7: #FFFFFF;

  /* -----------------------------------------------------------------------
     Color — Accents (each: primary + single light tint, no full ramp)
     ----------------------------------------------------------------------- */
  --brand-1: #577BDC;     /* primary action, links, focus */
  --brand-2: #E7F0FC;     /* tint: chip fill, info banner */

  --green-1: #5DB054;     /* success */
  --green-2: #EAF8E8;     /* success tint */

  --yellow-1: #E6A141;    /* warning */
  --yellow-2: #FFF0DA;    /* warning tint */

  --red-1: #E24F4F;       /* error / destructive */
  --red-2: #FFE1E1;       /* error tint */

  /* -----------------------------------------------------------------------
     Semantic color aliases
     ----------------------------------------------------------------------- */
  --fg-1: var(--gray-1);          /* primary text */
  --fg-2: var(--gray-2);           /* secondary text */
  --fg-3: var(--gray-3);           /* tertiary / placeholder */
  --fg-4: var(--gray-4);           /* disabled, dividers visible */
  --fg-on-brand: var(--gray-7);

  --bg-1: var(--gray-7);           /* page surface */
  --bg-2: var(--gray-6);           /* subtle surface */
  --bg-3: var(--gray-5);           /* chrome / divider fill */

  --border-default: var(--gray-5);
  --border-strong: var(--gray-4);
  --border-error: var(--red-1);
  --border-focus: var(--brand-1);

  --action-primary: var(--brand-1);
  --action-primary-hover: oklch(from var(--brand-1) calc(l - 0.04) c h);
  --action-primary-press: oklch(from var(--brand-1) calc(l - 0.08) c h);

  --status-success: var(--green-1);
  --status-success-bg: var(--green-2);
  --status-warning: var(--yellow-1);
  --status-warning-bg: var(--yellow-2);
  --status-error: var(--red-1);
  --status-error-bg: var(--red-2);
  --status-info: var(--brand-1);
  --status-info-bg: var(--brand-2);

  /* -----------------------------------------------------------------------
     Type — family + ramp
     Manrope only. Sizes: 10 / 12 / 14 / 16 / 24. Weights: 400 / 500 / 700.
     ----------------------------------------------------------------------- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-24: 24px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-tight: 1.25;     /* 24/headings */
  --lh-default: 1.4;    /* 14/16 body */
  --lh-loose: 1.5;      /* 12 captions, multi-line meta */

  /* -----------------------------------------------------------------------
     Spacing (4px base, intentionally limited)
     ----------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* -----------------------------------------------------------------------
     Radii
     ----------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     Elevation (extrapolated — kept very subtle)
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(53, 53, 53, 0.06);
  --shadow-md: 0 4px 12px rgba(53, 53, 53, 0.08);
  --shadow-lg: 0 12px 32px rgba(53, 53, 53, 0.12);

  /* -----------------------------------------------------------------------
     Motion
     ----------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* =========================================================================
   Semantic typographic styles
   ========================================================================= */

.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin: 0;
}

.h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-default);
  color: var(--fg-1);
  margin: 0;
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-default);
  color: var(--fg-1);
  margin: 0;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-default);
  color: var(--fg-1);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-default);
  color: var(--fg-1);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* base reset for design contexts */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}