/* GlobalSafeMed — design tokens + component classes.
   Copied from context/design/ (tokens/*.css, components/components.css).
   context/design/ remains the source of truth; this file is this site's
   own committed copy so the shipped page does not depend on the
   gitignored canvas-preview symlinks. */

/* GlobalSafeMed — webfonts
   Nexa  → brand wordmark + display headings (geometric rounded sans)
   Futura Book → body / UI text (the pitch-deck body face)
*/

@font-face {
  font-family: "Nexa";
  src: url("../assets/fonts/Nexa-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("../assets/fonts/Nexa-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Book";
  src: url("../assets/fonts/Futura-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* GlobalSafeMed — Color tokens
   Sampled directly from the brand marks:
   - brand blue  rgb(96,160,208)  #60A0D0  (cornflower/sky — the primary identity color)
   - deep teal   rgb(0,64,80)     #004050  (dark brand surface, from the blog icon)
   - ink         #1D1D1B          (near-black wordmark)
*/

:root {
  /* ---- Brand blue scale ---- */
  --gsm-blue-50:  #eef5fb;
  --gsm-blue-100: #d7e8f5;
  --gsm-blue-200: #b3d2ec;
  --gsm-blue-300: #8dbbe1;
  --gsm-blue-400: #74aed9;
  --gsm-blue-500: #60a0d0;   /* ← core brand blue */
  --gsm-blue-600: #4a89bd;
  --gsm-blue-700: #3a6e9c;
  --gsm-blue-800: #2c5478;
  --gsm-blue-900: #203d57;

  /* ---- Deep teal scale (trust / dark surfaces) ---- */
  --gsm-teal-50:  #e6f0f2;
  --gsm-teal-100: #c0d8dd;
  --gsm-teal-300: #6fa1ab;
  --gsm-teal-500: #1a6072;
  --gsm-teal-700: #084b5c;
  --gsm-teal-900: #004050;   /* ← core deep teal */
  --gsm-teal-950: #00303d;

  /* ---- Neutral / ink scale ---- */
  --gsm-ink:      #1d1d1b;   /* near-black brand ink */
  --gsm-gray-900: #23282d;
  --gsm-gray-800: #333a42;
  --gsm-gray-700: #4d565f;
  --gsm-gray-600: #6b747d;
  --gsm-gray-500: #8a929a;
  --gsm-gray-400: #aab1b8;
  --gsm-gray-300: #cfd4d9;
  --gsm-gray-200: #e4e7ea;
  --gsm-gray-100: #f1f3f5;
  --gsm-gray-50:  #f8fafb;
  --gsm-white:    #ffffff;

  /* ---- Semantic status (validated / suspect atestados) ---- */
  --gsm-success:      #2e9e6b;   /* verified / valid */
  --gsm-success-soft: #e4f4ec;
  --gsm-warning:      #e0a13a;   /* pending / review */
  --gsm-warning-soft: #fcf3e1;
  --gsm-danger:       #d15353;   /* suspect / fraud */
  --gsm-danger-soft:  #fbeaea;
  --gsm-info:         var(--gsm-blue-500);
  --gsm-info-soft:    var(--gsm-blue-50);

  /* ---- Semantic aliases (use these in components) ---- */
  --color-primary:        var(--gsm-teal-900);
  --color-primary-hover:  var(--gsm-teal-700);
  --color-primary-active: var(--gsm-teal-950);
  --color-primary-soft:   var(--gsm-teal-50);
  --color-accent:         var(--gsm-blue-500);

  --text-strong:   var(--gsm-ink);
  --text-body:     var(--gsm-gray-800);
  --text-muted:    var(--gsm-gray-600);
  --text-faint:    var(--gsm-gray-500);
  --text-on-brand: var(--gsm-white);
  --text-link:     var(--gsm-teal-700);

  --surface-page:    var(--gsm-gray-50);
  --surface-card:    var(--gsm-white);
  --surface-sunken:  var(--gsm-gray-100);
  --surface-inverse: var(--gsm-teal-900);

  --border-subtle:  var(--gsm-gray-200);
  --border-default: var(--gsm-gray-300);
  --border-strong:  var(--gsm-gray-400);
  --border-focus:   var(--gsm-teal-700);
}

/* GlobalSafeMed — Typography tokens
   Display / brand → Nexa (Light 300 for large display, Bold 700 for emphasis & wordmark)
   Body / UI       → Futura Book, with system fallbacks
*/

:root {
  --font-display: "Nexa", "Futura Book", "Century Gothic", system-ui, sans-serif;
  --font-body: "Futura Book", "Century Gothic", "Avenir Next", system-ui, -apple-system, sans-serif;

  /* Weights (Nexa ships Light + Bold only) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  /* Type scale — 1.25 major-third-ish, tuned for the SaaS UI */
  --fs-display: 56px;   /* hero */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 23px;
  --fs-h4: 19px;
  --fs-lg: 17px;
  --fs-base: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Tracking — Nexa display looks best with a touch of positive tracking */
  --ls-display: 0.01em;
  --ls-caps: 0.14em;
  --ls-normal: 0;
}

/* GlobalSafeMed — Spacing, radius, shadow, layout tokens
   Base unit: 4px. The brand reads clean & airy — generous whitespace,
   soft rounding, low-contrast shadows.
*/

:root {
  /* Spacing (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius — soft, friendly (never fully pill except capsule chips) */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows — low contrast, cool-tinted (teal/ink), never heavy */
  --shadow-xs: 0 1px 2px rgba(29, 29, 27, 0.05);
  --shadow-sm: 0 1px 3px rgba(29, 29, 27, 0.08), 0 1px 2px rgba(29, 29, 27, 0.04);
  --shadow-md: 0 4px 12px rgba(32, 61, 87, 0.08), 0 2px 4px rgba(29, 29, 27, 0.04);
  --shadow-lg: 0 12px 28px rgba(32, 61, 87, 0.12), 0 4px 10px rgba(29, 29, 27, 0.05);
  --shadow-focus: 0 0 0 3px rgba(0, 64, 80, 0.28);

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

  /* Layout */
  --container-max: 1200px;
  --sidebar-width: 248px;
  --header-height: 64px;
}

/* GlobalSafeMed — base element defaults.
   Kept minimal: sets the body type, link colors, and a couple of resets.
   Components carry their own layout. */

:root {
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings default to Nexa */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--color-primary-active);
  text-decoration: underline;
}

/* A reusable wide-tracked, all-caps eyebrow label — a signature brand device */
.gsm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* GlobalSafeMed — component styles.
   Reusable primitives read their look from the design tokens.
   Class-based so :hover / :focus / :active states are real CSS. */

/* ============ BUTTON ============ */
.gsm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--text-on-brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  user-select: none;
}
.gsm-btn:hover { background: var(--color-primary-hover); }
.gsm-btn:active { transform: translateY(1px); background: var(--color-primary-active); }
.gsm-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gsm-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.gsm-btn--sm { font-size: var(--fs-sm); padding: 7px 14px; }
.gsm-btn--md { font-size: var(--fs-base); padding: 10px 18px; }
.gsm-btn--lg { font-size: var(--fs-lg); padding: 13px 26px; }
.gsm-btn--block { display: flex; width: 100%; }

.gsm-btn--secondary {
  background: transparent; color: var(--color-primary); border-color: var(--color-primary);
}
.gsm-btn--secondary:hover { background: var(--surface-sunken); }
.gsm-btn--secondary:active { background: var(--gsm-gray-200); }

.gsm-btn--ghost {
  background: transparent; color: var(--text-body); border-color: transparent;
}
.gsm-btn--ghost:hover { background: var(--surface-sunken); }
.gsm-btn--ghost:active { background: var(--gsm-gray-200); }

.gsm-btn--dark {
  background: var(--gsm-teal-900); color: var(--gsm-white);
}
.gsm-btn--dark:hover { background: var(--gsm-teal-700); }
.gsm-btn--dark:active { background: var(--gsm-teal-950); }

.gsm-btn--danger { background: var(--gsm-danger); }
.gsm-btn--danger:hover { background: #bf4444; }
.gsm-btn--danger:active { background: #a83b3b; }

/* Accent (brand blue) — for CTAs on deep-teal surfaces */
.gsm-btn--accent { background: var(--gsm-blue-500); color: #fff; }
.gsm-btn--accent:hover { background: var(--gsm-blue-400); }
.gsm-btn--accent:active { background: var(--gsm-blue-600); }

/* Light — outline/solid white button for deep-teal surfaces */
.gsm-btn--light { background: #fff; color: var(--gsm-teal-900); }
.gsm-btn--light:hover { background: var(--gsm-teal-50); }
.gsm-btn--light:active { background: var(--gsm-teal-100); }

/* Outline light — transparent outline button for deep-teal surfaces */
.gsm-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.gsm-btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }
.gsm-btn--outline-light:active { background: rgba(255,255,255,.2); }

/* Outline — solid-white outline button for light surfaces */
.gsm-btn--outline { background: #fff; border-color: var(--border-default); color: var(--color-primary); }
.gsm-btn--outline:hover { background: var(--surface-sunken); }
.gsm-btn--outline:active { background: var(--gsm-gray-200); }

/* ============ ICON BUTTON ============ */
.gsm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.gsm-icon-btn:hover { background: var(--surface-sunken); color: var(--text-strong); }
.gsm-icon-btn:active { background: var(--gsm-gray-200); }
.gsm-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gsm-icon-btn--sm { width: 30px; height: 30px; }
.gsm-icon-btn--md { width: 38px; height: 38px; }
.gsm-icon-btn--lg { width: 46px; height: 46px; }
.gsm-icon-btn--solid { background: var(--color-primary); color: #fff; }
.gsm-icon-btn--solid:hover { background: var(--color-primary-hover); color: #fff; }

/* ============ FIELD / INPUT / SELECT ============ */
.gsm-field { display: flex; flex-direction: column; gap: 6px; }
.gsm-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.gsm-label__req { color: var(--gsm-danger); margin-left: 2px; }
.gsm-input, .gsm-select {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.gsm-input::placeholder { color: var(--text-faint); }
.gsm-input:hover, .gsm-select:hover { border-color: var(--border-strong); }
.gsm-input:focus, .gsm-select:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus);
}
.gsm-input:disabled, .gsm-select:disabled {
  background: var(--surface-sunken); color: var(--text-faint); cursor: not-allowed;
}
.gsm-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b747d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.gsm-field--error .gsm-input,
.gsm-field--error .gsm-select { border-color: var(--gsm-danger); }
.gsm-field--error .gsm-input:focus { box-shadow: 0 0 0 3px var(--gsm-danger-soft); }
.gsm-help { font-size: var(--fs-sm); color: var(--text-muted); }
.gsm-help--error { color: var(--gsm-danger); }

/* ============ CHECKBOX ============ */
.gsm-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-base); color: var(--text-body); }
.gsm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.gsm-check__box {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.gsm-check__box svg { opacity: 0; stroke: #fff; }
.gsm-check input:checked + .gsm-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.gsm-check input:checked + .gsm-check__box svg { opacity: 1; }
.gsm-check input:focus-visible + .gsm-check__box { box-shadow: var(--shadow-focus); }
.gsm-check--disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ CARD ============ */
.gsm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.gsm-card--flat { box-shadow: none; }
.gsm-card--raised { box-shadow: var(--shadow-md); }
.gsm-card--pad { padding: var(--space-6); }
.gsm-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.gsm-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); }
.gsm-card__body { padding: var(--space-6); }

/* ============ BADGE ============ */
.gsm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-muted);
}
.gsm-badge--primary { background: var(--gsm-blue-100); color: var(--gsm-blue-700); }
.gsm-badge--success { background: var(--gsm-success-soft); color: #1c7a4f; }
.gsm-badge--warning { background: var(--gsm-warning-soft); color: #9c6b17; }
.gsm-badge--danger { background: var(--gsm-danger-soft); color: #a83b3b; }
.gsm-badge--teal { background: var(--gsm-teal-100); color: var(--gsm-teal-900); }

/* ============ TAG (capsule, optionally dismissible) ============ */
.gsm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--fs-sm);
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-body);
  border: 1px solid var(--border-subtle);
}
.gsm-tag__x { display: inline-flex; cursor: pointer; color: var(--text-faint); border-radius: 50%; }
.gsm-tag__x:hover { color: var(--text-strong); }

/* ============ STATUS PILL (validation states) ============ */
.gsm-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.gsm-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gsm-status--valid   { background: var(--gsm-success-soft); color: #1c7a4f; }
.gsm-status--pending { background: var(--gsm-warning-soft); color: #9c6b17; }
.gsm-status--suspect { background: var(--gsm-danger-soft); color: #a83b3b; }
.gsm-status--neutral { background: var(--surface-sunken); color: var(--text-muted); }

/* ============ ALERT ============ */
.gsm-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.gsm-alert__icon { flex: none; margin-top: 1px; }
.gsm-alert__title { font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 2px; }
.gsm-alert__body { font-size: var(--fs-sm); color: var(--text-muted); }
.gsm-alert--info    { background: var(--gsm-blue-50); border-color: var(--gsm-blue-200); }
.gsm-alert--info    .gsm-alert__icon { color: var(--gsm-blue-600); }
.gsm-alert--success { background: var(--gsm-success-soft); border-color: #b9e2cd; }
.gsm-alert--success .gsm-alert__icon { color: var(--gsm-success); }
.gsm-alert--warning { background: var(--gsm-warning-soft); border-color: #f0d9a8; }
.gsm-alert--warning .gsm-alert__icon { color: var(--gsm-warning); }
.gsm-alert--danger  { background: var(--gsm-danger-soft); border-color: #eebcbc; }
.gsm-alert--danger  .gsm-alert__icon { color: var(--gsm-danger); }

/* ============ STAT CARD ============ */
.gsm-stat {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.gsm-stat__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-faint); }
.gsm-stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); color: var(--text-strong); line-height: 1.05; margin-top: 8px; }
.gsm-stat__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-sm); }
.gsm-stat__delta--up { color: var(--gsm-success); font-weight: var(--fw-bold); }
.gsm-stat__delta--down { color: var(--gsm-danger); font-weight: var(--fw-bold); }
.gsm-stat__hint { color: var(--text-faint); }

/* ============ TABS ============ */
.gsm-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.gsm-tab {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--text-muted); background: transparent; border: none; cursor: pointer;
  padding: 12px 16px; position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.gsm-tab:hover { color: var(--text-strong); }
.gsm-tab--active { color: var(--color-primary); }
.gsm-tab--active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px;
  background: var(--color-primary); border-radius: 2px;
}

/* ============ AVATAR ============ */
.gsm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); overflow: hidden;
  background: var(--gsm-teal-900); color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  flex: none; object-fit: cover;
}
.gsm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gsm-avatar--sm { width: 30px; height: 30px; font-size: var(--fs-xs); }
.gsm-avatar--md { width: 40px; height: 40px; font-size: var(--fs-sm); }
.gsm-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }