@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Design-system TLB (Layanan Publik) — token + styles dari Claude Design. */

/* ===== tokens/colors.css ===== */
/* ============================================================
   TLB ISP Design System — Color tokens
   Base palettes + semantic aliases. Light theme on :root,
   dark theme overrides under [data-theme="dark"].
   ============================================================ */

:root {
  /* --- Brand: Primary (TLB Blue #0066FF) --- */
  --blue-50:  #eef5ff;
  --blue-100: #d9e8ff;
  --blue-200: #b3d1ff;
  --blue-300: #80b2ff;
  --blue-400: #4d93ff;
  --blue-500: #0066ff;  /* primary */
  --blue-600: #0052cc;
  --blue-700: #003d99;
  --blue-800: #002966;
  --blue-900: #001a40;

  /* --- Brand: Secondary (Cyan #00B8D9) --- */
  --cyan-50:  #e6fbff;
  --cyan-100: #c0f4fc;
  --cyan-200: #82e7f5;
  --cyan-300: #3dd6ec;
  --cyan-400: #11c6e0;
  --cyan-500: #00b8d9;  /* secondary */
  --cyan-600: #0093ad;
  --cyan-700: #006e82;
  --cyan-800: #004a57;
  --cyan-900: #00262d;

  /* --- Neutral: Slate ramp --- */
  --slate-0:   #ffffff;
  --slate-50:  #f8fafc;  /* app background */
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;  /* border */
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #060c18;

  /* --- Semantic: Success (green) --- */
  --green-50:  #ecfdf3;
  --green-100: #d1fadf;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* --- Semantic: Warning (amber) --- */
  --amber-50:  #fffaeb;
  --amber-100: #fef0c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* --- Semantic: Danger (red) --- */
  --red-50:  #fef3f2;
  --red-100: #fee4e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* --- Semantic: Info (reuse cyan) --- */
  --info-50:  var(--cyan-50);
  --info-500: var(--cyan-500);
  --info-600: var(--cyan-600);

  /* ========== SEMANTIC ALIASES (light theme) ========== */

  /* Surfaces */
  --surface-app:      var(--slate-50);   /* page background */
  --surface-card:     var(--slate-0);    /* cards, panels */
  --surface-sunken:   var(--slate-100);  /* wells, table headers */
  --surface-raised:   var(--slate-0);    /* popovers, menus */
  --surface-inverse:  var(--slate-900);  /* tooltips, dark chips */
  --surface-hover:    var(--slate-100);
  --surface-active:   var(--slate-200);

  /* Text */
  --text-strong:    var(--slate-900);  /* headings, primary values */
  --text-body:      var(--slate-700);  /* default body */
  --text-muted:     var(--slate-500);  /* secondary, captions */
  --text-subtle:    var(--slate-400);  /* placeholders, disabled */
  --text-on-brand:  #ffffff;           /* text on primary fill */
  --text-link:      var(--blue-600);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-focus:   var(--blue-500);

  /* Brand */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-secondary:      var(--cyan-500);
  --brand-tint:           var(--blue-50);   /* soft brand background */
  --brand-ring:           rgba(0, 102, 255, 0.16); /* focus ring */

  /* Status — solid + soft tint + on-tint text */
  --status-success:       var(--green-600);
  --status-success-soft:  var(--green-50);
  --status-success-text:  var(--green-700);

  --status-warning:       var(--amber-600);
  --status-warning-soft:  var(--amber-50);
  --status-warning-text:  var(--amber-700);

  --status-danger:        var(--red-600);
  --status-danger-soft:   var(--red-50);
  --status-danger-text:   var(--red-700);

  --status-neutral:       var(--slate-500);
  --status-neutral-soft:  var(--slate-100);
  --status-neutral-text:  var(--slate-600);

  --status-info:          var(--cyan-600);
  --status-info-soft:     var(--cyan-50);
  --status-info-text:     var(--cyan-700);

  /* Network / NOC live indicators */
  --net-online:   var(--green-500);
  --net-offline:  var(--red-500);
  --net-degraded: var(--amber-500);
  --net-idle:     var(--slate-400);

  /* Data-viz sequence (charts, sparklines) */
  --viz-1: var(--blue-500);
  --viz-2: var(--cyan-500);
  --viz-3: var(--green-500);
  --viz-4: var(--amber-500);
  --viz-5: #8b5cf6;
  --viz-6: var(--red-500);

  /* Overlay */
  --overlay-scrim: rgba(15, 23, 42, 0.45);

  /* ========== ERGONOMIC SHORT ALIASES ==========
     Preferred names used across components & UI kits. The descriptive
     scale above stays available; these are the everyday handles. */
  --brand:         var(--brand-primary);
  --brand-hover:   var(--brand-primary-hover);
  --brand-active:  var(--brand-primary-active);
  --brand-on:      var(--text-on-brand);
  --brand-subtle:  var(--brand-tint);

  --success:       var(--status-success);
  --success-soft:  var(--status-success-soft);
  --success-text:  var(--status-success-text);
  --warning:       var(--status-warning);
  --warning-soft:  var(--status-warning-soft);
  --warning-text:  var(--status-warning-text);
  --danger:        var(--status-danger);
  --danger-soft:   var(--status-danger-soft);
  --danger-text:   var(--status-danger-text);
  --info:          var(--status-info);
  --info-soft:     var(--status-info-soft);
  --info-text:     var(--status-info-text);

  /* Focus ring (box-shadow value) */
  --ring: 0 0 0 3px var(--brand-ring);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --surface-app:      var(--slate-950);
  --surface-card:     var(--slate-900);
  --surface-sunken:   #0b1322;
  --surface-raised:   var(--slate-800);
  --surface-inverse:  var(--slate-100);
  --surface-hover:    rgba(255, 255, 255, 0.04);
  --surface-active:   rgba(255, 255, 255, 0.08);

  --text-strong:    #f1f5f9;
  --text-body:      var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-subtle:    var(--slate-500);
  --text-on-brand:  #ffffff;
  --text-link:      var(--blue-300);

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-focus:   var(--blue-400);

  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-400);
  --brand-primary-active: var(--blue-300);
  --brand-tint:           rgba(0, 102, 255, 0.14);
  --brand-ring:           rgba(77, 147, 255, 0.28);

  --status-success-soft:  rgba(34, 197, 94, 0.14);
  --status-success-text:  #4ade80;
  --status-warning-soft:  rgba(245, 158, 11, 0.14);
  --status-warning-text:  #fbbf24;
  --status-danger-soft:   rgba(239, 68, 68, 0.14);
  --status-danger-text:   #f87171;
  --status-neutral-soft:  rgba(255, 255, 255, 0.06);
  --status-neutral-text:  var(--slate-300);
  --status-info-soft:     rgba(0, 184, 217, 0.14);
  --status-info-text:     #22d3ee;

  --overlay-scrim: rgba(0, 0, 0, 0.6);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   TLB ISP Design System — Typography tokens
   Inter for UI/text, JetBrains Mono for numeric/network data.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Weight aliases (ergonomic) */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Type scale (px) — tuned for dense ops dashboards */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* base UI size */
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --text-5xl: 44px;   /* KPI hero numbers */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;  /* uppercase eyebrows/labels */

  /* Tabular numerals helper value */
  --numeric-tabular: "tnum" 1, "lnum" 1; /* @kind other */

  /* Ergonomic aliases used across components */
  --text-base: var(--text-md);   /* 14px base UI size */
  --lh-tight:   var(--leading-tight);
  --lh-snug:    var(--leading-snug);
  --lh-normal:  var(--leading-normal);
  --lh-relaxed: var(--leading-relaxed);
}

/* ===== tokens/spacing.css ===== */
/* TLB Design System — Spacing Tokens
 * 4px base grid. Dense enough for data tables, breathable for cards.
 */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Semantic */
  --gap-inline:   var(--space-2);   /* between inline controls */
  --gap-stack:    var(--space-4);   /* between stacked blocks */
  --gap-section:  var(--space-8);   /* between page sections */
  --pad-control:  var(--space-3);   /* input / button inner */
  --pad-card:     var(--space-6);   /* card inner */
  --pad-cell:     var(--space-3);   /* table cell */
  --page-gutter:  var(--space-6);   /* page edge padding */

  /* Layout */
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:     60px;
  --container-max: 1440px;
}

/* ===== tokens/radius.css ===== */
/* TLB Design System — Radius & Elevation Tokens
 * Brand radius 16px (cards). Generous, soft, premium. Layered soft shadows.
 */
:root {
  /* Corner radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;   /* brand default — cards */
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-xl);
  --radius-control: var(--radius-md);

  /* Shadows — soft, low-spread, cool-tinted to sit on slate surfaces */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-focus: var(--ring);

  /* Inner shadow for wells / pressed */
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Brand glow (CTAs, active nav, live status) */
  --shadow-brand: 0 6px 16px color-mix(in srgb, var(--blue-500) 32%, transparent);

  /* Borders */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
}

:root[data-theme="dark"],
.theme-dark {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ===== tokens/base.css ===== */
/* TLB Design System — Base / reset layer.
 * Minimal element defaults wired to tokens. Safe for consumers to inherit.
 */
*, *::before, *::after { box-sizing: border-box; }

.tlb, [data-tlb] {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

/* Utility helpers consumers / kits can lean on */
.tlb-mono { font-family: var(--font-mono); font-feature-settings: normal; }
.tlb-tnum { font-variant-numeric: tabular-nums; }
.tlb-eyebrow {
  font: var(--fw-semibold) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* ===== styles.css (tanpa @import) ===== */
/* TLB Design System — Global entry point.
 */