@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* ============================================================
   CoralOps — bundled stylesheet (tokens + base + components)
   Flattened from the CoralOps Design System for standalone deploy.
   ============================================================ */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   CoralOps — Webfonts
   Inter (primary) + DM Mono (numeric / accent), inherited
   directly from the GigOps engine type system.
   Served from Google Fonts CDN — these ARE the brand faces,
   not substitutes. Swap to self-hosted @font-face here if an
   offline / locked-down build is required.
   ============================================================ */



/* ===== tokens/colors.css ===== */
/* ============================================================
   CoralOps — Color tokens
   GigOps engine, CoralOps skin. Signal Blue is swapped for a
   deep-ocean accent; a restrained coral carries restoration /
   net-new surfaces. Stage Black deepens toward marine dark.
   ============================================================ */

:root {
  /* ── Ocean (primary accent — replaces Signal Blue) ───────── */
  --ocean:        #0E6FA8;   /* primary · CTA · links · active nav */
  --ocean-deep:   #0A4F78;   /* gradient anchor · pressed · shadow */
  --ocean-light:  #38A9D9;   /* gradient end · light accent · charts */
  --ocean-soft:   #E4F1F8;   /* tint surface · soft chips · active rows */

  /* ── Coral (secondary accent — restoration & net-new) ────── */
  --coral:        #F2683C;   /* nurseries · outplanting · brand mark cue */
  --coral-deep:   #C9491F;   /* coral text on light · pressed */
  --coral-soft:   #FCEADF;   /* coral tint surface */

  /* ── Anchors & canvas ────────────────────────────────────── */
  --abyss:        #07141F;   /* "Stage Black" → marine dark · headlines · dark UI */
  --abyss-2:      #102A3A;   /* deep surface · dark cards */
  --paper:        #F1F7FB;   /* default canvas (cool aqua tint) */
  --surface:      #FFFFFF;   /* card / panel */
  --surface-soft: #E9F2F8;   /* soft section background */
  --surface-mute: #EEF3F6;   /* muted fills · tracks · pills */

  /* ── Borders ─────────────────────────────────────────────── */
  --border:       #D6E4EE;
  --border-2:     #BFD4E2;
  --border-soft:  rgba(214,228,238,0.6);

  /* ── Text ────────────────────────────────────────────────── */
  --text:         #07141F;   /* primary */
  --text-2:       #41576A;   /* body */
  --text-3:       #647A8C;   /* muted */
  --text-4:       #93A8B8;   /* hint · metadata */
  --text-inv:     #F1F7FB;   /* on dark / on accent */

  /* ── Status ──────────────────────────────────────────────── */
  --green:        #1E7B4B;   /* confirmed · current · reef-health up */
  --green-soft:   #E2F3EB;
  --amber:        #B5610C;   /* variance · pending · low survival */
  --amber-soft:   #FAEEDD;
  --red:          #DC2626;   /* blocked · expired cert/permit · incident */
  --red-soft:     #FCEAEA;

  /* ── Gradients (mark · headline accent · hero glow only) ─── */
  --grad:      linear-gradient(135deg, #0A4F78 0%, #0E6FA8 55%, #38A9D9 100%); /* @kind color */
  --grad-deep: linear-gradient(180deg, #07141F 0%, #102A3A 100%); /* @kind color */
  --grad-tide: linear-gradient(135deg, #0E6FA8 0%, #38A9D9 100%); /* @kind color */
  --grad-coral: linear-gradient(135deg, #C9491F 0%, #F2683C 55%, #FF8A66 100%); /* @kind color */

  /* ── Semantic aliases ────────────────────────────────────── */
  --accent:          var(--ocean);
  --accent-strong:   var(--ocean-deep);
  --accent-soft:     var(--ocean-soft);
  --text-link:       var(--ocean);
  --text-heading:    var(--text);
  --text-body:       var(--text-2);
  --surface-card:    var(--surface);
  --surface-canvas:  var(--paper);
  --surface-deep:    var(--abyss);
  --restoration:     var(--coral);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   CoralOps — Typography tokens
   Inter does the talking; DM Mono shows up wherever a number,
   a code, or a system label needs to feel definitive.
   ============================================================ */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Display / heading sizes (clamped for fluid scaling) */
  --fs-display:  clamp(40px, 6vw, 72px); /* @kind font */
  --fs-section:  clamp(30px, 3.6vw, 46px); /* @kind font */
  --fs-feature:  clamp(24px, 2.6vw, 34px); /* @kind font */
  --fs-title:    19px; /* @kind font */
  --fs-lead:     19px; /* @kind font */
  --fs-body:     16px; /* @kind font */
  --fs-sm:       14px; /* @kind font */
  --fs-xs:       13px; /* @kind font */
  --fs-eyebrow:  12px; /* @kind font */
  --fs-micro:    10.5px; /* @kind font */

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Line heights */
  --lh-tight:    1.02; /* @kind font */
  --lh-heading:  1.1; /* @kind font */
  --lh-snug:     1.3; /* @kind font */
  --lh-body:     1.55; /* @kind font */

  /* Letter spacing */
  --ls-display:  -0.035em; /* @kind font */
  --ls-heading:  -0.025em; /* @kind font */
  --ls-tight:    -0.015em; /* @kind font */
  --ls-wordmark: -0.04em; /* @kind font */
  --ls-wide:     0.06em; /* @kind font */
  --ls-wider:    0.08em; /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   CoralOps — Spacing, radii, shadow & layout tokens
   4px base grid. Shadows are ocean-tinted, never neutral grey.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --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;

  /* Radii */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadows (ocean-tinted) */
  --shadow-sm: 0 1px 2px rgba(7,20,31,0.04), 0 1px 1px rgba(7,20,31,0.03);
  --shadow:    0 4px 14px rgba(10,79,120,0.08), 0 1px 2px rgba(10,79,120,0.05);
  --shadow-lg: 0 24px 60px -20px rgba(10,79,120,0.28), 0 8px 24px -8px rgba(10,79,120,0.10);

  /* Layout */
  --max:    1240px;
  --max-sm: 960px;
  --topbar: 64px;
}


/* ===== tokens/base.css ===== */
/* ============================================================
   CoralOps — Base layer
   Reset, document defaults, and a few brand primitives that
   every CoralOps surface leans on. Tokens come from tokens/*.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}

/* ── Layout helpers ──────────────────────────────────────── */
.container    { max-width: var(--max);    margin: 0 auto; padding: 0 28px; }
.container-sm { max-width: var(--max-sm); margin: 0 auto; padding: 0 28px; }

/* ── Eyebrow (mono, uppercase, ocean) ────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ocean);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.muted { color: var(--text-3); }
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

/* ── Display & section type ──────────────────────────────── */
.h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
}
.h-display em,
.h-section em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--fw-semibold);
}
.h-section {
  font-size: var(--fs-section);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-medium);
}
.lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
  line-height: var(--lh-body);
  max-width: 620px;
  text-wrap: pretty;
}

/* Numeric / system text */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }


/* ===== components/components.css ===== */
/* ============================================================
   CoralOps — Component styles
   Class-based styling for the reusable React primitives. Shipped
   with styles.css so a consumer that mounts <Button/> gets the
   real CoralOps look (incl. hover/focus/active) for free.
   All values trace back to tokens/*.
   ============================================================ */

/* ── Button ──────────────────────────────────────────────── */
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border-radius: 8px;
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
  letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s, transform .14s, box-shadow .14s;
}
.co-btn svg { width: 14px; height: 14px; }
.co-btn--primary { background: var(--abyss); color: var(--text-inv); }
.co-btn--primary:hover { background: #10222F; transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(7,20,31,0.4); }
.co-btn--ocean { background: var(--ocean); color: #fff; }
.co-btn--ocean:hover { background: var(--ocean-deep); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(14,111,168,0.5); }
.co-btn--coral { background: var(--coral); color: #fff; }
.co-btn--coral:hover { background: var(--coral-deep); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(242,104,60,0.45); }
.co-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.co-btn--ghost:hover { background: var(--surface); border-color: var(--border-2); }
.co-btn--link { color: var(--text-2); padding: 0 6px; height: auto; }
.co-btn--link:hover { color: var(--ocean); }
.co-btn--sm { height: 32px; font-size: var(--fs-xs); padding: 0 12px; }
.co-btn--lg { height: 46px; font-size: 15px; padding: 0 20px; }
.co-btn:disabled, .co-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.co-btn:active { transform: translateY(0); }

/* ── Badge / status pill ─────────────────────────────────── */
.co-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: var(--fw-medium) 9.5px/1 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  background: var(--surface-mute); color: var(--text-3);
}
.co-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.co-badge--ocean  { background: var(--ocean-soft);  color: var(--ocean-deep); }
.co-badge--green  { background: var(--green-soft);  color: var(--green); }
.co-badge--amber  { background: var(--amber-soft);  color: var(--amber); }
.co-badge--red    { background: var(--red-soft);    color: var(--red); }
.co-badge--coral  { background: var(--coral-soft);  color: var(--coral-deep); }
.co-badge--gray   { background: var(--surface-mute); color: var(--text-3); }

/* ── Chip (mono pill, bordered) ──────────────────────────── */
.co-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-medium) 11px/1 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.co-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.co-chip--ocean { background: var(--ocean-soft); color: var(--ocean-deep); border-color: transparent; }
.co-chip--coral { background: var(--coral-soft); color: var(--coral-deep); border-color: transparent; }

/* ── Avatar ──────────────────────────────────────────────── */
.co-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--fw-bold) 10.5px/1 var(--font-sans);
  background: var(--ocean-soft); color: var(--ocean-deep);
  border: 1.5px solid rgba(14,111,168,0.28);
  overflow: hidden; flex-shrink: 0;
}
.co-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-avatar--coral { background: var(--coral-soft); color: var(--coral-deep); border-color: rgba(242,104,60,0.34); }
.co-avatar--green { background: var(--green-soft); color: var(--green); border-color: rgba(30,123,75,0.3); }
.co-avatar--sm { width: 24px; height: 24px; font-size: 9.5px; }
.co-avatar--lg { width: 40px; height: 40px; font-size: 13px; }

/* ── Logo (mark + wordmark) ──────────────────────────────── */
.co-logo { display: inline-flex; align-items: center; gap: 9px; letter-spacing: var(--ls-wordmark); color: var(--text); }
.co-logo__mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--grad-coral);
  box-shadow: 0 4px 14px rgba(201,73,31,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  position: relative; flex-shrink: 0;
}
.co-logo__mark::after {
  content: ""; position: absolute; inset: 5px 5px auto auto;
  width: 6px; height: 6px; background: rgba(255,255,255,0.82); border-radius: 50%;
}
.co-logo__word { font-size: 17px; font-weight: var(--fw-light); }
.co-logo__word b { font-weight: var(--fw-semibold); color: var(--coral); }
.co-logo--inverse { color: var(--text-inv); }
.co-logo--inverse .co-logo__word b { color: var(--coral); }
.co-logo--lg .co-logo__mark { width: 36px; height: 36px; border-radius: 10px; }
.co-logo--lg .co-logo__mark::after { inset: 7px 7px auto auto; width: 9px; height: 9px; }
.co-logo--lg .co-logo__word { font-size: 26px; }
.co-logo--sm .co-logo__mark { width: 18px; height: 18px; border-radius: 5px; }
.co-logo--sm .co-logo__mark::after { inset: 4px 4px auto auto; width: 5px; height: 5px; }
.co-logo--sm .co-logo__word { font-size: 14px; }

/* ── Card ────────────────────────────────────────────────── */
.co-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.co-card--hover:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.co-card--dark { background: var(--abyss); border-color: rgba(255,255,255,0.08); color: var(--text-inv); }
.co-card--pad-lg { padding: 28px; }

/* ── Form field ──────────────────────────────────────────── */
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-label {
  font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-mono);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-3);
}
.co-input, .co-select {
  height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: var(--fw-regular) var(--fs-sm)/1 var(--font-sans);
  transition: border-color .14s, box-shadow .14s;
  width: 100%;
}
.co-input::placeholder { color: var(--text-4); }
.co-input:focus, .co-select:focus {
  outline: none; border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(14,111,168,0.14);
}
.co-input:disabled, .co-select:disabled { background: var(--surface-mute); color: var(--text-3); pointer-events: none; }
.co-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647A8C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.co-input--err { border-color: var(--red); }
.co-input--err:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.14); }

/* ── KPI card ────────────────────────────────────────────── */
.co-kpi {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; background: var(--surface);
}
.co-kpi__l { font: var(--fw-regular) var(--fs-micro)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.co-kpi__v { font: var(--fw-semibold) 21px/1 var(--font-mono); letter-spacing: -0.02em; margin-top: 5px; color: var(--text); }
.co-kpi__d { font: var(--fw-regular) var(--fs-micro)/1.3 var(--font-mono); margin-top: 3px; color: var(--text-3); }
.co-kpi__d--up { color: var(--green); }
.co-kpi__d--dn { color: var(--red); }

/* ── Progress bar ────────────────────────────────────────── */
.co-progress__meta { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.co-progress__meta .l { color: var(--text-2); }
.co-progress__meta .v { font-family: var(--font-mono); color: var(--text-3); }
.co-progress__track { height: 5px; background: var(--surface-mute); border-radius: 3px; overflow: hidden; }
.co-progress__fill { height: 100%; border-radius: 3px; background: var(--ocean); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.co-progress__fill--green { background: var(--green); }
.co-progress__fill--amber { background: var(--amber); }
.co-progress__fill--red   { background: var(--red); }
.co-progress__fill--coral { background: var(--coral); }

/* ── Alert row ───────────────────────────────────────────── */
.co-alert {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px; border-radius: 8px; background: var(--surface-mute);
}
.co-alert__dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--ocean); }
.co-alert__dot--red   { background: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.co-alert__dot--amber { background: var(--amber); }
.co-alert__dot--ocean { background: var(--ocean); }
.co-alert__dot--green { background: var(--green); }
.co-alert__tx { font-size: 12px; color: var(--text); line-height: 1.4; }
.co-alert__sb { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* ── Nav item (sidebar) ──────────────────────────────────── */
.co-nav {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.co-nav:hover { background: var(--surface-mute); color: var(--text-2); }
.co-nav svg { width: 15px; height: 15px; flex-shrink: 0; }
.co-nav--active { background: var(--ocean-soft); color: var(--ocean-deep); font-weight: var(--fw-medium); }
.co-nav--active:hover { background: var(--ocean-soft); color: var(--ocean-deep); }
.co-nav__badge { margin-left: auto; }

/* ── Segmented control ───────────────────────────────────── */
.co-seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-mute); border-radius: 9px; }
.co-seg__opt {
  padding: 5px 12px; border-radius: 6px;
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-sans); color: var(--text-3);
  transition: background .12s, color .12s, box-shadow .12s;
}
.co-seg__opt:hover { color: var(--text); }
.co-seg__opt--active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }