/* eCold — Design Tokens
   "Glacier" identity. Sophisticated cold-chain professionalism.
   All colors expressed in oklch for perceptual harmony. */

:root {
  /* ── Surfaces (light) ──────────────────────────── */
  --ec-bg:        oklch(0.985 0.004 230);   /* ice paper, barely tinted */
  --ec-surface:   #ffffff;                  /* elevated cards */
  --ec-sunken:    oklch(0.962 0.006 230);   /* grouped/inset regions */
  --ec-line:      oklch(0.915 0.008 230);   /* hairline dividers */
  --ec-line-soft: oklch(0.945 0.006 230);

  /* ── Content (light) ──────────────────────────── */
  --ec-ink:       oklch(0.20 0.025 245);    /* primary text — deep ink */
  --ec-ink-2:     oklch(0.42 0.020 245);    /* secondary */
  --ec-ink-3:     oklch(0.60 0.014 245);    /* tertiary / placeholder */
  --ec-ink-4:     oklch(0.75 0.010 245);    /* disabled / icon mute */

  /* ── Brand (Glacier) ──────────────────────────── */
  --ec-brand:        oklch(0.38 0.095 235); /* deep glacier ink */
  --ec-brand-press:  oklch(0.32 0.095 235);
  --ec-brand-hover:  oklch(0.34 0.095 235);
  --ec-brand-tint:   oklch(0.945 0.030 230);/* subtle fill */
  --ec-brand-ink:    oklch(0.28 0.080 235); /* brand text on tint */

  /* ── Accent (live / data) ─────────────────────── */
  --ec-accent:       oklch(0.72 0.13 215);  /* cyan-glacier */
  --ec-accent-glow:  oklch(0.78 0.16 210);

  /* ── Status ──────────────────────────────────── */
  --ec-ok:        oklch(0.58 0.11 160);     /* running — emerald */
  --ec-ok-tint:   oklch(0.95 0.04 160);
  --ec-ok-ink:    oklch(0.40 0.10 160);

  --ec-warn:      oklch(0.72 0.14 75);      /* warning — amber */
  --ec-warn-tint: oklch(0.96 0.05 80);
  --ec-warn-ink:  oklch(0.50 0.12 65);

  --ec-fault:     oklch(0.60 0.18 25);      /* fault — coral */
  --ec-fault-tint:oklch(0.96 0.04 25);
  --ec-fault-ink: oklch(0.46 0.16 25);

  --ec-idle:      oklch(0.62 0.020 245);    /* offline / unknown */
  --ec-idle-tint: oklch(0.95 0.010 245);

  /* ── Radii ──────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Elevation (use sparingly) ─────────────── */
  --shadow-1: 0 1px 2px rgba(16, 32, 60, 0.04), 0 0 0 1px var(--ec-line);
  --shadow-2: 0 6px 24px -8px rgba(16, 32, 60, 0.10), 0 1px 2px rgba(16, 32, 60, 0.04);
  --shadow-pop: 0 24px 48px -12px rgba(16, 32, 60, 0.22), 0 0 0 1px var(--ec-line);

  /* ── Type ──────────────────────────────────── */
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ── Motion ───────────────────────────────── */
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

.dark {
  --ec-bg:        oklch(0.155 0.020 245);   /* deep navy ink */
  --ec-surface:   oklch(0.195 0.022 245);
  --ec-sunken:    oklch(0.130 0.018 245);
  --ec-line:      oklch(0.285 0.022 245);
  --ec-line-soft: oklch(0.235 0.020 245);

  --ec-ink:       oklch(0.965 0.008 230);
  --ec-ink-2:     oklch(0.72 0.018 230);
  --ec-ink-3:     oklch(0.55 0.018 240);
  --ec-ink-4:     oklch(0.42 0.018 240);

  --ec-brand:        oklch(0.78 0.105 218);
  --ec-brand-press:  oklch(0.72 0.105 218);
  --ec-brand-hover:  oklch(0.82 0.105 218);
  --ec-brand-tint:   oklch(0.28 0.060 235);
  --ec-brand-ink:    oklch(0.86 0.080 218);

  --ec-accent:       oklch(0.78 0.16 205);
  --ec-accent-glow:  oklch(0.85 0.18 200);

  --ec-ok:        oklch(0.74 0.16 158);
  --ec-ok-tint:   oklch(0.28 0.075 158);
  --ec-ok-ink:    oklch(0.82 0.16 158);

  --ec-warn:      oklch(0.82 0.16 80);
  --ec-warn-tint: oklch(0.30 0.080 70);
  --ec-warn-ink:  oklch(0.88 0.15 80);

  --ec-fault:     oklch(0.72 0.18 25);
  --ec-fault-tint:oklch(0.30 0.10 25);
  --ec-fault-ink: oklch(0.82 0.17 25);

  --ec-idle:      oklch(0.55 0.020 245);
  --ec-idle-tint: oklch(0.26 0.020 245);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 1px var(--ec-line);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.45), 0 0 0 1px var(--ec-line);
  --shadow-pop: 0 24px 48px -12px rgba(0,0,0,0.65), 0 0 0 1px var(--ec-line);
}

/* ── Base type defaults ─────────────────────── */
.ec {
  font-family: var(--font-sans);
  color: var(--ec-ink);
  background: var(--ec-bg);
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.ec * { box-sizing: border-box; }

/* Type styles */
.t-display  { font-size: 30px; line-height: 1.1;  font-weight: 700; letter-spacing: -0.025em; }
.t-title-lg { font-size: 22px; line-height: 1.2;  font-weight: 600; letter-spacing: -0.018em; }
.t-title    { font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; }
.t-body     { font-size: 14px; line-height: 1.45; font-weight: 500; }
.t-body-sm  { font-size: 13px; line-height: 1.4;  font-weight: 500; }
.t-caption  { font-size: 11px; line-height: 1.2;  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ec-ink-3); }
.t-mono-num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-id       { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--ec-ink-3); letter-spacing: 0; }