/* ReSOLVE Facilities — Color + Type System
   Derived from product screenshots + logo (deep teal + soft sage green).
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ============== BRAND COLORS ============== */

  /* Primary — deep operational teal (logo wordmark) */
  --rf-teal-950: #062c2e;
  --rf-teal-900: #0a3d3f;
  --rf-teal-800: #0e4f51;   /* primary brand */
  --rf-teal-700: #14605f;
  --rf-teal-600: #1c7a76;
  --rf-teal-500: #2a948e;
  --rf-teal-400: #58b3ad;
  --rf-teal-300: #93cfca;
  --rf-teal-200: #c5e4e1;
  --rf-teal-100: #e3f1ef;
  --rf-teal-50:  #f0f7f6;

  /* Secondary — sage / mint (logo arc) */
  --rf-sage-700: #4a8b6f;
  --rf-sage-500: #6fb594;
  --rf-sage-400: #8ec9ad;
  --rf-sage-300: #b6dec9;
  --rf-sage-200: #d4ecde;
  --rf-sage-100: #e9f5ee;

  /* Accent — warm amber (Snap & Go / IA) */
  --rf-amber-700: #c25b1f;
  --rf-amber-600: #db6e28;
  --rf-amber-500: #ec8240;   /* AI accent */
  --rf-amber-400: #f49a64;
  --rf-amber-200: #f8c9ab;
  --rf-amber-100: #fde7d6;
  --rf-amber-50:  #fef3eb;

  /* Critical / SLA red */
  --rf-red-700: #b3261e;
  --rf-red-500: #e0473d;
  --rf-red-100: #fde6e4;

  /* Status — operational */
  --rf-status-online:    #19a36a;   /* técnico online */
  --rf-status-busy:      #ec8240;   /* ocupado */
  --rf-status-offline:   #8a99a3;   /* offline */
  --rf-status-critical:  #e0473d;
  --rf-status-resolved:  var(--rf-teal-600);

  /* Neutrals — cool slate */
  --rf-slate-950: #0c1a22;
  --rf-slate-900: #15242d;
  --rf-slate-800: #1f3340;
  --rf-slate-700: #324859;
  --rf-slate-600: #4a6173;
  --rf-slate-500: #6b8190;
  --rf-slate-400: #93a4b1;
  --rf-slate-300: #bcc8d1;
  --rf-slate-200: #dce3e9;
  --rf-slate-100: #eaeff3;
  --rf-slate-50:  #f4f6f8;

  --rf-bg-page: #f6f7f9;
  --rf-bg-elev: #ffffff;
  --rf-bg-tint: #eef2f3;          /* hero / section soft */

  /* ============== SEMANTIC ============== */
  --rf-fg-1: var(--rf-teal-900);          /* h1 deep teal */
  --rf-fg-2: var(--rf-slate-900);         /* body strong */
  --rf-fg-3: var(--rf-slate-600);         /* body */
  --rf-fg-4: var(--rf-slate-500);         /* meta */
  --rf-fg-on-primary: #ffffff;

  --rf-border-1: var(--rf-slate-200);
  --rf-border-2: var(--rf-slate-100);
  --rf-divider:  rgba(15,40,50,0.08);

  --rf-primary: var(--rf-teal-800);
  --rf-primary-hover: var(--rf-teal-700);
  --rf-primary-press: var(--rf-teal-900);

  /* ============== ELEVATION / RADIUS / SPACE ============== */
  --rf-radius-sm: 8px;
  --rf-radius-md: 12px;
  --rf-radius-lg: 16px;
  --rf-radius-xl: 20px;
  --rf-radius-pill: 999px;

  --rf-shadow-sm: 0 1px 2px rgba(15,40,50,0.06);
  --rf-shadow-md: 0 6px 16px -4px rgba(15,40,50,0.08), 0 2px 4px rgba(15,40,50,0.04);
  --rf-shadow-lg: 0 18px 40px -12px rgba(15,40,50,0.16), 0 6px 12px -6px rgba(15,40,50,0.06);
  --rf-shadow-card: 0 1px 0 rgba(15,40,50,0.04), 0 8px 24px -12px rgba(15,40,50,0.10);
  --rf-shadow-inset: inset 0 0 0 1px var(--rf-border-1);

  --rf-space-1: 4px;
  --rf-space-2: 8px;
  --rf-space-3: 12px;
  --rf-space-4: 16px;
  --rf-space-5: 20px;
  --rf-space-6: 24px;
  --rf-space-8: 32px;
  --rf-space-10: 40px;
  --rf-space-12: 48px;
  --rf-space-16: 64px;
  --rf-space-20: 80px;
  --rf-space-24: 96px;

  /* ============== TYPE SYSTEM ============== */
  --rf-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* "Mono" and "Display" aliases kept for compatibility, all pointing to the
     same sans family so the whole site reads with a unified typeface. */
  --rf-font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rf-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tracking + leading match the deep-teal headline feel of the product */
  --rf-h1-size: clamp(40px, 5.2vw, 64px);
  --rf-h1-weight: 800;
  --rf-h1-track: -0.02em;
  --rf-h1-lead: 1.05;

  --rf-h2-size: clamp(32px, 3.8vw, 44px);
  --rf-h2-weight: 700;
  --rf-h2-track: -0.018em;
  --rf-h2-lead: 1.1;

  --rf-h3-size: 24px;
  --rf-h3-weight: 700;
  --rf-h3-track: -0.012em;
  --rf-h3-lead: 1.2;

  --rf-h4-size: 18px;
  --rf-h4-weight: 700;
  --rf-h4-lead: 1.3;

  --rf-eyebrow-size: 13px;
  --rf-eyebrow-weight: 600;
  --rf-eyebrow-track: 0.02em;

  --rf-body-size: 16px;
  --rf-body-lead: 1.55;

  --rf-small-size: 14px;
  --rf-small-lead: 1.5;

  --rf-tiny-size: 12px;
}

/* ============== BASE ELEMENTS ============== */
html, body {
  font-family: var(--rf-font-sans);
  color: var(--rf-fg-2);
  background: var(--rf-bg-page);
  font-size: var(--rf-body-size);
  line-height: var(--rf-body-lead);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--rf-h1-size);
  font-weight: var(--rf-h1-weight);
  letter-spacing: var(--rf-h1-track);
  line-height: var(--rf-h1-lead);
  color: var(--rf-fg-1);
  margin: 0;
}
h2 {
  font-size: var(--rf-h2-size);
  font-weight: var(--rf-h2-weight);
  letter-spacing: var(--rf-h2-track);
  line-height: var(--rf-h2-lead);
  color: var(--rf-fg-1);
  margin: 0;
}
h3 {
  font-size: var(--rf-h3-size);
  font-weight: var(--rf-h3-weight);
  letter-spacing: var(--rf-h3-track);
  line-height: var(--rf-h3-lead);
  color: var(--rf-fg-2);
  margin: 0;
}
h4 {
  font-size: var(--rf-h4-size);
  font-weight: var(--rf-h4-weight);
  line-height: var(--rf-h4-lead);
  color: var(--rf-fg-2);
  margin: 0;
}
p { margin: 0; color: var(--rf-fg-3); }

.rf-eyebrow {
  display: inline-block;
  font-size: var(--rf-eyebrow-size);
  font-weight: var(--rf-eyebrow-weight);
  letter-spacing: var(--rf-eyebrow-track);
  color: var(--rf-teal-700);
  background: var(--rf-teal-100);
  padding: 6px 12px;
  border-radius: var(--rf-radius-pill);
}
.rf-eyebrow--amber {
  color: var(--rf-amber-700);
  background: var(--rf-amber-100);
}
.rf-mono { font-family: var(--rf-font-mono); }