@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

@import "/styles/components.css";
@import "/styles/home.css";
@import "/styles/footer.css";
@import "/styles/header.css";
@import "/styles/api-listing.css";
@import "/styles/api-content.css";
@import "/styles/api-landing.css";
@import "/styles/doc.css";
@import "/styles/side-bar.css";
@import "/styles/api-workflows.css";
@import "/styles/mcp-landing.css";

:root {
  /* ============================================================
     THEME PALETTE
     Edit the SEEDS to re-theme the whole portal. Everything under
     DERIVED updates itself via color-mix().
     ============================================================ */

  /* ---- SEEDS · brand (these cascade everywhere) ----
     Values taken verbatim from the original (pre-theme) palette so the same
     hue can be reused directly across the portal rather than re-derived as a
     slight variation. Only gradients and translucent overlays are derived. */
  --primary:       #1a4c6d;   /* structure, links, focus, primary buttons */
  --primary-dark:  #043556;   /* primary hover / pressed / deep navy panels */
  --primary-light: #2b719f;   /* lifted primary states, on-dark highlights  */
  --accent:        #fe8c3a;   /* solid highlights, badges, env dots, borders */
  --accent-dark:   #ef4223;   /* accent shade */
  --accent-light:  #ff8636;   /* accent tint */

  /* ---- SEEDS · neutral foundation ---- */
  --ink:     #1a2433;   /* darkest text / navy — generates the grey ramp */
  --surface: #ffffff;   /* page background — the ramp mixes toward this */
  --white:   #ffffff;   /* pure white — text / fills on colored or dark surfaces (kept distinct from --surface) */

  /* ---- SEEDS · semantic (stay independent of the brand) ---- */
  --success: #2e7d32;
  --warning: #e39a00;
  --danger:  #c62828;
  --info:    #0277bd;

  /* ---- DERIVED · text & neutrals (from --ink → --surface) ---- */
  --text-strong:    var(--ink);
  --text:           color-mix(in srgb, var(--ink) 80%, var(--surface));
  --text-muted:     color-mix(in srgb, var(--ink) 52%, var(--surface));
  --text-subtle:    color-mix(in srgb, var(--ink) 38%, var(--surface));
  --border:         color-mix(in srgb, var(--ink) 12%, var(--surface));
  --border-strong:  color-mix(in srgb, var(--ink) 22%, var(--surface));
  --surface-sunken: color-mix(in srgb, var(--ink) 4%,  var(--surface));
  --overlay:        color-mix(in srgb, var(--ink) 55%, transparent);
  --ink-deep:       color-mix(in oklch, var(--primary) 55%, #000);

  /* ---- DERIVED · primary family (dark & light are seeds above) ---- */
  --primary-surface: color-mix(in srgb, var(--primary) 8%,  var(--surface));
  --focus-ring:      color-mix(in srgb, var(--primary) 40%, transparent);

  /* ---- DERIVED · accent family + CTA gradient ---- */
  --accent-surface: color-mix(in srgb,  var(--accent) 12%, var(--surface));
  --cta-gradient:   linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-light) 100%);

  /* ---- DERIVED · semantic surfaces (tinted badge / banner backgrounds) ---- */
  --success-surface: color-mix(in srgb, var(--success) 12%, var(--surface));
  --warning-surface: color-mix(in srgb, var(--warning) 14%, var(--surface));
  --danger-surface:  color-mix(in srgb, var(--danger)  10%, var(--surface));
  --info-surface:    color-mix(in srgb, var(--info)    12%, var(--surface));

  /* ---- DERIVED · dark brand surface + content on it ----
     Shared by every dark navy surface: the home hero, the sidebar, and the
     sign-in / org-select shell. --surface-dark is the ground (from the brand
     seeds); --on-dark* are the text / fills / pill that sit on top of it (white
     at reducing opacity + a lightened --primary-light pill). Only gradients and
     translucent overlays are derived — no separate seeds. */
  --surface-dark:
    radial-gradient(56.25rem 37.5rem at 12% 8%, color-mix(in srgb, var(--primary-light) 42%, transparent), transparent 60%),
    radial-gradient(43.75rem 37.5rem at 95% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(160deg,
      var(--primary-dark) 0%,
      color-mix(in srgb, var(--primary-dark) 72%, #000) 60%,
      color-mix(in srgb, var(--primary-dark) 58%, #000) 100%);
  --on-dark-pill:        color-mix(in oklch, var(--primary-light) 60%, var(--white));
  --on-dark-pill-bg:     color-mix(in srgb,  var(--primary-light) 16%, transparent);
  --on-dark-pill-border: color-mix(in srgb,  var(--primary-light) 34%, transparent);
  --on-dark:        color-mix(in srgb, var(--white) 74%, transparent);
  --on-dark-muted:  color-mix(in srgb, var(--white) 52%, transparent);
  --on-dark-fill:        color-mix(in srgb, var(--white) 6%,  transparent);
  --on-dark-fill-border: color-mix(in srgb, var(--white) 12%, transparent);

  /* ---- Non-color tokens ---- */
  --font-family-sans: Inter, "Montserrat", "Quicksand", "Noto Sans", "Poppins", system-ui, -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --border-radius: 0.5rem;
}

html {
  overflow: hidden;
  height: 100%;
}

.main-body {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-sans);
  background-color: var(--surface);
}

/* Row between fixed navbar and fixed footer */
.layout-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  margin-top: 4rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

.main-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  font-weight: 500;
  position: relative;
}

.content-area {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0 2rem 1rem 2rem;
}

.section {
  margin: 3.5rem 1rem 0 0;
}

.common-header h2 {
  font-size: 1.875rem;
  margin-bottom: 3.5rem;
  font-weight: 600;
  color: var(--text);
}

.container-header {
  display: block;
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 600;
}