/*
 * Karli Studio — Agentlab Docs Theme
 *
 * Design tokens extracted from the Karli Studio frontend (Angular Material M3).
 * Primary: #0060a9 / #a2c9ff
 * Font:    Montserrat
 *
 * Material for MkDocs uses CSS custom properties prefixed with --md-*.
 * We override these to match the Karli brand.
 */


/* ==========================================================================
   LIGHT SCHEME
   Karli light palette derived from --mat-sys-* light-dark() first values
   ========================================================================== */

[data-md-color-scheme="karli-light"] {

  /* -- Primary ----------------------------------------------------------- */
  --md-primary-fg-color:          #0060a9;
  --md-primary-fg-color--light:   #d3e4ff;
  --md-primary-fg-color--dark:    #004881;
  --md-primary-bg-color:          #ffffff;
  --md-primary-bg-color--light:   #ffffff;

  /* -- Accent (tertiary from Karli — purple) ----------------------------- */
  --md-accent-fg-color:           #8a38ac;
  --md-accent-fg-color--transparent: rgba(138, 56, 172, 0.1);
  --md-accent-bg-color:           #f9d8ff;
  --md-accent-bg-color--light:    #f9d8ff;

  /* -- Surface & background ---------------------------------------------- */
  --md-default-fg-color:          #001c3b;
  --md-default-fg-color--light:   #404753;
  --md-default-fg-color--lighter: #707784;
  --md-default-fg-color--lightest: rgba(0, 28, 59, 0.12);
  --md-default-bg-color:          #f9f9ff;
  --md-default-bg-color--light:   #f0f4ff;
  --md-default-bg-color--lighter: #e7eeff;
  --md-default-bg-color--lightest: #dee9ff;

  /* -- Code blocks ------------------------------------------------------- */
  --md-code-fg-color:             #001c3b;
  --md-code-bg-color:             #e7eeff;
  --md-code-hl-color:             rgba(0, 96, 169, 0.12);

  /* -- Typeset ----------------------------------------------------------- */
  --md-typeset-color:             #001c3b;
  --md-typeset-a-color:           #0060a9;

  /* -- Admonitions ------------------------------------------------------- */
  --md-admonition-bg-color:       #f0f4ff;

  /* -- Footer ------------------------------------------------------------ */
  --md-footer-fg-color:           #d5e3ff;
  --md-footer-fg-color--light:    rgba(213, 227, 255, 0.7);
  --md-footer-fg-color--lighter:  rgba(213, 227, 255, 0.3);
  --md-footer-bg-color:           #001c3b;
  --md-footer-bg-color--dark:     #000b18;
}

.md-footer {
  display: none;
}


/* ==========================================================================
   DARK SCHEME
   Karli dark palette derived from --mat-sys-* light-dark() second values
   ========================================================================== */

[data-md-color-scheme="karli-dark"] {

  /* -- Primary ----------------------------------------------------------- */
  --md-primary-fg-color:          #a2c9ff;
  --md-primary-fg-color--light:   #004881;
  --md-primary-fg-color--dark:    #d3e4ff;
  --md-primary-bg-color:          #001123;
  --md-primary-bg-color--light:   #001c3b;

  /* -- Accent (tertiary — purple) ---------------------------------------- */
  --md-accent-fg-color:           #ecb1ff;
  --md-accent-fg-color--transparent: rgba(236, 177, 255, 0.1);
  --md-accent-bg-color:           #701a92;
  --md-accent-bg-color--light:    #701a92;

  /* -- Surface & background ---------------------------------------------- */
  --md-default-fg-color:          #d5e3ff;
  --md-default-fg-color--light:   #dbe3f2;
  --md-default-fg-color--lighter: #89919f;
  --md-default-fg-color--lightest: rgba(213, 227, 255, 0.12);
  --md-default-bg-color:          #001123;
  --md-default-bg-color--light:   #001c3b;
  --md-default-bg-color--lighter: #002042;
  --md-default-bg-color--lightest: #002a55;

  /* -- Code blocks ------------------------------------------------------- */
  --md-code-fg-color:             #d5e3ff;
  --md-code-bg-color:             #002042;
  --md-code-hl-color:             rgba(162, 201, 255, 0.12);

  /* -- Typeset ----------------------------------------------------------- */
  --md-typeset-color:             #d5e3ff;
  --md-typeset-a-color:           #a2c9ff;

  /* -- Admonitions ------------------------------------------------------- */
  --md-admonition-bg-color:       #002042;

  /* -- Footer ------------------------------------------------------------ */
  --md-footer-fg-color:           #d5e3ff;
  --md-footer-fg-color--light:    rgba(213, 227, 255, 0.7);
  --md-footer-fg-color--lighter:  rgba(213, 227, 255, 0.3);
  --md-footer-bg-color:           #000b18;
  --md-footer-bg-color--dark:     #000000;
}


/* ==========================================================================
   TYPOGRAPHY
   Karli uses Montserrat across the M3 type scale.
   Material for MkDocs loads the font via google fonts (set in mkdocs.yml),
   but we fine-tune sizes and weights to match the Karli scale.
   ========================================================================== */

.md-typeset {
  font-weight: 400;
  letter-spacing: 0.031rem;          /* --mat-sys-body-large-tracking */
  line-height: 1.65;
}

.md-typeset h1 {
  font-weight: 400;
  letter-spacing: -0.016rem;         /* display-large tracking */
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 400;
  letter-spacing: 0;                 /* headline-large tracking */
}

.md-typeset h3,
.md-typeset h4 {
  font-weight: 500;
  letter-spacing: 0.009rem;          /* title-medium tracking */
}

/* Labels / small UI text */
.md-typeset .md-nav__link,
.md-typeset .md-tabs__link {
  font-weight: 500;
  letter-spacing: 0.006rem;          /* label-large tracking */
}


/* ==========================================================================
   COMPONENT REFINEMENTS
   Rounded corners, shadows, and accents matching Karli's M3 tokens.
   ========================================================================== */

/* -- Navigation & header ------------------------------------------------- */
.md-header {
  box-shadow: none;
}

.md-banner {
  display: none;
}

/* -- Search bar ---------------------------------------------------------- */
.md-search__form {
  border-radius: 28px;               /* --mat-sys-corner-extra-large */
}

/* -- Content cards / admonitions ----------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;               /* --mat-sys-corner-medium */
  border-left-width: 3px;
  box-shadow: none;
}

/* -- Code blocks --------------------------------------------------------- */
.md-typeset pre > code {
  border-radius: 12px;               /* --mat-sys-corner-medium */
}

.md-typeset code {
  border-radius: 4px;                /* --mat-sys-corner-extra-small */
  padding: 0.1em 0.4em;
}

/* -- Tables -------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border-radius: 8px;                /* --mat-sys-corner-small */
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter);
  font-weight: 500;
  letter-spacing: 0.006rem;
}

/* -- Tabs (content tabs) ------------------------------------------------- */
.md-typeset .tabbed-labels > label {
  font-weight: 500;
  letter-spacing: 0.006rem;
  border-radius: 8px 8px 0 0;        /* --mat-sys-corner-small top */
}

/* -- Navigation tabs ----------------------------------------------------- */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* -- Sidebar ------------------------------------------------------------- */
.md-sidebar__scrollwrap {
  scrollbar-width: thin;
}

/* -- Chip-style tags (for future use in component docs) ------------------ */
.karli-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;             /* --mat-sys-corner-full */
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.031rem;
  line-height: 1rem;
}

.karli-chip--blue {
  background: #dff2ff;               /* --background-blue-chip */
  color: #0094ff;                    /* --foreground-blue-chip */
}

.karli-chip--green {
  background: #dcf8ce;               /* --background-green-chip */
  color: #3ba41e;                    /* --foreground-green-chip */
}

.karli-chip--neutral {
  background: #f0f3fd;               /* --background-neutral-chip */
  color: #404753;                    /* --foreground-neutral-chip */
}

.karli-chip--orange {
  background: #fff4da;               /* --background-orange-chip */
  color: #ee9d12;                    /* --foreground-orange-chip */
}

.karli-chip--red {
  background: #ffb4ab;               /* --background-red-chip */
  color: #ba1a1a;                    /* --foreground-red-chip */
}


/* ==========================================================================
   STATUS BADGES
   Handy for marking component maturity in docs.
   Usage in markdown (with attr_list extension):
     *Stable*{ .status-badge .status-badge--stable }
     *Beta*{ .status-badge .status-badge--beta }
     *New*{ .status-badge .status-badge--new }
   ========================================================================== */

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.031rem;
  line-height: 1rem;
  vertical-align: middle;
}

.status-badge--stable {
  background: #dcf8ce;
  color: #3ba41e;
}

.status-badge--beta {
  background: #fff4da;
  color: #ee9d12;
}

.status-badge--new {
  background: #dff2ff;
  color: #0094ff;
}