/* =========================================================================
   Helios Salud — Colors & Type
   Source of truth for brand tokens. Mirrors the Tailwind config used in the
   Helios Salud operating platform (reference/helios-demo.html).
   ========================================================================= */

/* -------- Fonts --------
   All type uses Inter (variable, local). Display/headings use graduated negative
   tracking per level. Mono/numeric/tabular surfaces use Inter with
   `tabular-nums`. Montserrat is kept registered for optional brand display
   use but is NOT the default for any variable. */
/* Inter — local variable fonts (brand upload) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}
/* Montserrat — kept registered as an optional brand display face. Not the default
   (see --font-display / --font-mono below). Apply per-component with
   `font-family:'Montserrat'` if a specific surface needs it. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* ===================== BRAND (Helios teal/cyan) ===================== */
  --helios-50:  #EEF7FA;
  --helios-100: #D6ECF2;
  --helios-200: #AEDAE7;
  --helios-300: #7EC0D3;
  --helios-400: #4CA4BD;
  --helios-500: #268AA6; /* core brand — used in pills, accents */
  --helios-600: #1B7690; /* primary button, brand headings */
  --helios-700: #185F75; /* hover, links */
  --helios-800: #0F4858;
  --helios-900: #093140;

  /* ===================== INK (text / neutrals) ===================== */
  --ink-50:  #F6F7F9;
  --ink-100: #EDEFF3;
  --ink-200: #D6DAE2;
  --ink-300: #AFB6C4;
  --ink-400: #7E8798; /* muted secondary text */
  --ink-500: #5A6372;
  --ink-600: #3E4654;
  --ink-700: #272D39; /* body copy */
  --ink-800: #151922; /* primary text */
  --ink-900: #080B12;

  /* ===================== ACCENT / SEMANTIC ===================== */
  --sun-400:   #F5B84D;
  --sun-500:   #EEA028; /* sun — brand secondary, warn */
  --sun-600:   #D28513;

  --teal2-400: #3ABFC4;
  --teal2-500: #23A6AB; /* secondary teal, pharmacy/dispensa */
  --teal2-600: #0E8287;

  --rose2-400: #E86A8A;
  --rose2-500: #D94D70;
  --rose2-600: #B63558;

  --danger-400: #F36F6F;
  --danger-500: #E04B4B; /* errors, destructive, critical risk */
  --danger-600: #B93535;

  --warn-400: #F5B84D;
  --warn-500: #EEA028; /* alias of sun */
  --warn-600: #D28513;

  --ok-400: #4CC28C;
  --ok-500: #2EA571; /* success, confirmed, adherencia OK */
  --ok-600: #1E8057;

  /* ===================== SURFACES ===================== */
  --bg-app:       #F4F6F9;           /* app background (slate-50-ish) */
  --bg-card:      #FFFFFF;           /* card surface */
  --bg-subtle:    var(--ink-50);     /* section backgrounds, empty states */
  --bg-glass:     rgba(255,255,255,.72);

  /* ===================== SEMANTIC TOKENS ===================== */
  --fg-1: var(--ink-800);  /* primary text */
  --fg-2: var(--ink-500);  /* secondary text */
  --fg-3: var(--ink-400);  /* muted / placeholder */
  --fg-4: var(--ink-300);  /* chevrons, deco */
  --fg-on-brand: #FFFFFF;

  --border-1: var(--ink-100);          /* default hairlines, card borders */
  --border-2: var(--ink-200);          /* inputs, stronger dividers */
  --border-focus: var(--helios-400);   /* focus ring */

  --link: var(--helios-700);
  --link-hover: var(--helios-800);

  /* ===================== TYPE ===================== */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale — tuned for dense operational UI. Deck/marketing go larger. */
  --fs-xxs: 10.5px;   /* micro labels, badge-sm */
  --fs-xs:  11.5px;   /* badges, meta, chip */
  --fs-sm:  12px;     /* table cells, nav items */
  --fs-md:  12.5px;   /* default body in app */
  --fs-base:13px;     /* card subtitles, buttons-lg */
  --fs-lg:  14px;     /* card titles */
  --fs-xl:  16px;     /* H3 */
  --fs-2xl: 20px;     /* H2 */
  --fs-3xl: 24px;     /* Page H1 */
  --fs-4xl: 32px;     /* Feature title */
  --fs-5xl: 48px;     /* Hero / KPI numbers */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /* ===================== RADIUS ===================== */
  --r-xs:  6px;
  --r-sm:  8px;   /* buttons, inputs */
  --r-md:  10px;  /* pills beyond full */
  --r-lg:  12px;  /* small cards */
  --r-xl:  14px;  /* tiles */
  --r-2xl: 16px;  /* default card radius */
  --r-3xl: 20px;  /* hero cards */
  --r-full:9999px;

  /* ===================== SPACING (4px base) ===================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ===================== SHADOWS ===================== */
  --shadow-card:    0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow-brand:   0 6px 16px -8px rgba(27,118,144,0.35);
  --shadow-pop:     0 12px 40px -12px rgba(8,11,18,0.18), 0 4px 12px -4px rgba(8,11,18,0.08);
  --shadow-sidebar: 1px 0 0 rgba(15,23,42,0.05);
  --shadow-raise:   0 8px 24px -14px rgba(8,11,18,0.25), 0 2px 4px -2px rgba(8,11,18,0.08);

  /* ===================== MOTION ===================== */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ===================== GRADIENTS ===================== */
  --grad-brand:      linear-gradient(135deg, #268AA6 0%, #1B7690 45%, #185F75 100%);
  --grad-brand-soft: linear-gradient(135deg, #EEF7FA 0%, #D6ECF2 100%);
  --grad-sun:        linear-gradient(135deg, #F5B84D, #EEA028);
  --grad-mesh:
    radial-gradient(at 12% 8%,  rgba(38,138,166,0.08), transparent 50%),
    radial-gradient(at 88% 12%, rgba(35,166,171,0.06), transparent 55%),
    radial-gradient(at 70% 95%, rgba(238,160,40,0.05), transparent 55%);
}

/* =========================================================================
   Base element styles — opt-in by including this file.
   Keep overrides conservative so we don't fight Tailwind.
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

/* Headings use Inter with graduated negative tracking by level. */
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--fg-1);
}

h1 { font-size: var(--fs-3xl); font-weight: var(--fw-800); line-height: var(--lh-tight); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-700); line-height: var(--lh-tight); letter-spacing: -0.012em; }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-600); line-height: var(--lh-snug);  letter-spacing: -0.008em; }
h4 { font-size: var(--fs-base);font-weight: var(--fw-600); line-height: var(--lh-snug);  letter-spacing: -0.005em; }

p { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-1); }
small, .meta { font-size: var(--fs-xs); color: var(--fg-2); }

code, kbd, pre, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Focus ring — used on inputs, buttons, nav items. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbar tune — matches reference app. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 10px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Utility: mesh background used in hero/empty states. */
.bg-mesh { background: var(--grad-mesh); }
.bg-brand-grad { background: var(--grad-brand); }
.bg-brand-grad-soft { background: var(--grad-brand-soft); }
.bg-sun-grad { background: var(--grad-sun); }

/* Utility: striped background (used on pending/empty states). */
.striped {
  background-image: repeating-linear-gradient(-45deg, rgba(15,23,42,.04) 0 2px, transparent 2px 8px);
}

/* Utility: dot grid (used behind workflow canvas). */
.dot-grid {
  background-image: radial-gradient(rgba(175,182,196,0.35) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Utility: glass surface (used on top bar). */
.glass { background: var(--bg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }