/* ─────────────────────────────────────────────────────────────────────────────
   Seismocode Design System — Colors & Type Tokens
   Source: Seismocode Design System (claude.ai/design)
   ─────────────────────────────────────────────────────────────────────────────
   Dark, institutional, mining-tech. Cinematic backgrounds with a single brand
   green accent and earth-tone data palette. Poppins everywhere. JetBrains Mono
   for technical readouts (telemetry, depth, Vs values).
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ── BRAND ────────────────────────────────────────────────────────────── */
  --brand-green:        #27422A;
  --brand-green-2:      #355A38;
  --brand-green-3:      #4A7A4D;
  --brand-green-mark:   #2A8835;
  --brand-mark-grey:    #6E6E6E;

  /* ── EARTH / SURFACE ──────────────────────────────────────────────────── */
  --earth-0:  #000000;
  --earth-1:  #060E1C;
  --earth-2:  #0F1B2E;
  --earth-3:  #162338;
  --earth-4:  #1E2F48;
  --earth-5:  #2D3748;
  --earth-6:  #475569;

  /* ── FOREGROUND TEXT ──────────────────────────────────────────────────── */
  --fg-1: #FFFFFF;
  --fg-2: #CBD5E1;
  --fg-3: #94A3B8;
  --fg-4: #7B8FA1;
  --fg-5: #475569;

  /* ── DATA / SEMANTIC ──────────────────────────────────────────────────── */
  --data-red:       #E11D48;
  --data-orange:    #FF6B35;
  --data-amber:     #F0A830;
  --data-green:     #22C55E;
  --data-cyan:      #00D4F5;
  --data-cyan-deep: #0891B2;
  --data-blue:      #1D8BC9;
  --data-indigo:    #11468C;

  /* Semantic aliases */
  --accent:          var(--brand-green);
  --accent-hover:    var(--brand-green-2);
  --accent-on-dark:  var(--brand-green-3);
  --state-cyan:      var(--data-cyan);
  --state-cyan-deep: var(--data-cyan-deep);
  --positive:        var(--data-green);
  --warning:         var(--data-amber);
  --critical:        var(--data-red);
  --info:            var(--data-blue);

  /* Surface tokens */
  --surface:        var(--earth-2);
  --surface-raised: var(--earth-3);
  --surface-hover:  var(--earth-4);
  --border-faint:   rgba(255,255,255,0.06);
  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-thin:     200;
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extrabold:800;

  --t-display-1: 72px;
  --t-display-2: 56px;
  --t-display-3: 44px;
  --t-h1:        34px;
  --t-h2:        26px;
  --t-h3:        20px;
  --t-h4:        16px;
  --t-body:      14px;
  --t-body-sm:   12.5px;
  --t-caption:   11.5px;
  --t-eyebrow:   10.5px;

  /* ── SPACE ────────────────────────────────────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 96px;
  --s-12: 128px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   8px;
  --r-full: 999px;

  /* ── ELEVATION ───────────────────────────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px 0 rgba(0,0,0,0.35);
  --elev-2: 0 2px 8px -2px rgba(0,0,0,0.45);
  --elev-3: 0 8px 24px -8px rgba(0,0,0,0.6);
  --elev-focus: 0 0 0 2px rgba(74,122,77,0.45);

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-cinematic: 1200ms;
}

/* ── Semantic type classes ──────────────────────────────────────────────── */
.t-display-1 {
  font-family: var(--font-display); font-weight: var(--w-thin);
  font-size: var(--t-display-1); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-display); font-weight: var(--w-thin);
  font-size: var(--t-display-2); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-display); font-weight: var(--w-light);
  font-size: var(--t-h1); line-height: 1.15; letter-spacing: -0.012em; color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.008em; color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; color: var(--fg-1);
}
.t-body {
  font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--t-body); line-height: 1.55; color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: var(--t-eyebrow); line-height: 1; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono); font-weight: var(--w-regular);
  font-size: var(--t-body-sm); letter-spacing: 0; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.t-emph      { color: var(--brand-green-3); font-weight: var(--w-medium); }
.t-emph-cyan { color: var(--data-cyan);     font-weight: var(--w-medium); }