/* Edge Impulse Extension Kit — design tokens (July 2026)
 * Load AFTER argon-dashboard.css / component.css / mobileclient.css.
 * Reference these variables instead of hard-coding hex values. */

:root {
  /* ---- Accent ---- */
  --ei-primary: #5e72e4;
  --ei-primary-hover: #233dd2;
  --ei-secondary: #f7fafc;
  --ei-default: #172b4d;

  /* ---- Gradient ---- */
  /* Argon's .bg-gradient-primary — the indigo band behind the top of the page.
   * This is the only gradient in the system. */
  --ei-gradient-primary: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);

  /* ---- Neutral ---- */
  --ei-darker: #000000;
  --ei-dark: #212529;
  --ei-gray-dark: #32325d;   /* heading text */
  --ei-body: #525f7f;        /* body text */
  --ei-gray: #8898aa;        /* muted / caption */
  --ei-light: #adb5bd;
  --ei-light-2: #ced4da;     /* input borders */
  --ei-disabled: #ced4d8;
  --ei-lighter: #e9ecef;     /* hairlines, card borders */
  --ei-bg: #f8f9fe;          /* page background */
  --ei-panel: #f6f9fc;       /* table header / quiet panel */
  --ei-white: #ffffff;

  /* ---- Status ---- */
  --ei-success: #2dce89;
  --ei-info: #11cdef;
  --ei-warning: #fb6340;
  --ei-danger: #f5365c;
  --ei-badge-light: #879cb0;

  /* Status tints: 50% and 15% strength (heading-colored text on these) */
  --ei-success-50: rgba(45, 206, 137, 0.5);
  --ei-success-15: rgba(45, 206, 137, 0.15);
  --ei-info-15: rgba(17, 205, 239, 0.15);
  --ei-warning-15: rgba(251, 99, 64, 0.15);
  --ei-danger-50: rgba(245, 54, 92, 0.5);
  --ei-danger-15: rgba(245, 54, 92, 0.15);
  --ei-warning-10: rgba(251, 99, 64, 0.1); /* suggested-action panel */

  /* ---- Data visualization (matplotlib tab10) ---- */
  --ei-viz-stroke: #333333;
  --ei-viz-1: #1f77b4;
  --ei-viz-2: #ff7f0e;
  --ei-viz-3: #2ca02c;
  --ei-viz-4: #d62728;
  --ei-viz-5: #9467bd;
  --ei-viz-6: #8c564b;
  --ei-viz-7: #e377c2;
  --ei-viz-8: #7f7f7f;
  --ei-viz-9: #bcbd22;
  --ei-viz-10: #17becf;

  /* ---- Typography ---- */
  --ei-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ei-weight-regular: 400;
  --ei-weight-semibold: 600;
  --ei-weight-bold: 700;
  --ei-line-height: 1.5;

  --ei-display-1: 3.3rem;      /* 53px */
  --ei-display-2: 2.75rem;     /* 44px */
  --ei-display-3: 2.1875rem;   /* 35px */
  --ei-h1: 1.625rem;           /* 26px */
  --ei-h2: 1.25rem;            /* 20px */
  --ei-h3: 1.0625rem;          /* 17px — card title */
  --ei-h4: 0.9375rem;          /* 15px */
  --ei-h5: 0.8125rem;          /* 13px */
  --ei-h6: 0.625rem;           /* 10px, uppercase */

  --ei-text-xl: 1.5rem;        /* 24px */
  --ei-text-lg: 1.25rem;       /* 20px */
  --ei-text: 1rem;             /* 16px — paragraph */
  --ei-text-sm: 0.875rem;      /* 14px */
  --ei-text-xs: 0.75rem;       /* 12px */
  --ei-caption: 0.625rem;      /* 10px */

  /* ---- Layout ---- */
  --ei-gutter: 30px;           /* page edge -> first card */
  --ei-card-gap: 24px;         /* between stacked cards */
  --ei-radius: 6px;
  --ei-band-height: 240px;     /* indigo band; ends behind the second card */
}

/* Argon already sets the base — body, h1-h6 and links all compute to the
 * values in this skill (Open Sans 16/24, #525f7f on #f8f9fe, headings 26/20/
 * 17/15/13/10 at 600 in #32325d, links #5e72e4). Nothing below restates it;
 * this sheet only adds what Argon has no opinion on. */

/* Uppercase micro-label used by metric tiles and table headers */
.ei-label {
  color: var(--ei-gray);
  font-size: var(--ei-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badges — Argon's are correct; only the colorless ones need help.
 *
 * .badge-secondary / .badge-white / .badge-neutral sit at 1.3:1 on a white
 * card and .badge-light at 2.7:1 — the ghost "UNAVAILABLE" chip. Repaired
 * with the guide's own .badge-light value #879cb0 walked down to 4.5:1, and
 * scoped to .card so all four stay usable as light chips on the indigo band.
 *
 * Everything else is left exactly as Argon ships it, the status hues
 * included. They are quiet on purpose and that quiet is what Studio looks
 * like; when a status has to carry across the room, use a status *cell*
 * (ei-tables), not a badge. */
.card .badge-secondary,
.card .badge-white,
.card .badge-neutral,
.card .badge-light {
  background-color: #edf0f3;
  color: #4d7091;
}

/* Extension name + EDGE IMPULSE badge (ei-page-layout header card, ei-forms
 * configure card). A badge inline in an <h3> sits on the text baseline, about
 * 2px below the middle of the title, so flex-centre it instead.
 * Usage: <h3 class="mb-0 ei-title">Name <span class="badge badge-primary ml-2">EDGE IMPULSE</span></h3> */
.ei-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}
.ei-title > .badge { line-height: 1; }

.ei-caption { color: var(--ei-gray); font-size: var(--ei-caption); }
.ei-text-xs { font-size: var(--ei-text-xs); }
.ei-text-sm { font-size: var(--ei-text-sm); }
.ei-text-lg { font-size: var(--ei-text-lg); }
.ei-text-xl { font-size: var(--ei-text-xl); }

/* Card rhythm: 30px outside, 24px between.
 *
 * Put .ei-page on the .container-fluid that wraps the whole extension. It does
 * two things the design guide asks for and Bootstrap does not:
 *
 *  1. The 30px gutter. Argon's .container-fluid pads 15px, .row pulls back
 *     -15px and .col pads 15px again — so the default lands the first card
 *     15px from the page edge, half of what the redlines call for. Padding the
 *     wrapper 30px nets exactly 30px once the row/col maths cancels out.
 *  2. The indigo band. The Studio primary gradient fills the top 240px of the
 *     page and the first cards sit on top of it, so the band ends behind the
 *     second card. Everything below it is the #f8f9fe page background.
 */
.ei-page {
  background-color: var(--ei-bg);
  background-image: var(--ei-gradient-primary);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% var(--ei-band-height);
  padding: var(--ei-gutter);
}

/* Safety net: 24px between stacked cards even if someone forgets mt-4.
 * Descendant, not child, so it still reaches cards wrapped in a container that
 * gets shown or hidden as a block (the configure gate does exactly that). */
.ei-page .row > .col .card + .card,
.ei-page .row > [class^="col-"] .card + .card {
  margin-top: var(--ei-card-gap);
}

/* Tab bar on the band: active tab is a white pill, the rest are white text.
 * Argon's .nav-pills does the inverse, so this overrides it — load after.
 *
 * Tabs are navigation chrome, not content: keep them at 14px (Argon's own
 * base size, what Studio's nav-pills render at) so they stay quieter than the
 * 17px H3 extension name in the first card. Semibold white on the indigo band
 * already reads heavier than it measures — at 17px the tab bar shouts over the
 * page title. */
.ei-tabs {
  margin-bottom: var(--ei-card-gap);
}

.ei-tabs .nav-link {
  background-color: transparent;
  box-shadow: none;
  color: var(--ei-white);
  font-size: var(--ei-text-sm);
  font-weight: var(--ei-weight-semibold);
  padding: 0.5rem 0.875rem;
}

/* Icons inline with the label, never bigger than it. */
.ei-tabs .nav-link i {
  font-size: 1em;
  margin-right: 0.5rem;
}

.ei-tabs .nav-link:hover {
  color: var(--ei-white);
  opacity: 0.85;
}

.ei-tabs .nav-link.active,
.ei-tabs .show > .nav-link {
  background-color: var(--ei-white);
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  color: var(--ei-default);
  opacity: 1;
}