/* =========================================================================
   SENTRA DESIGN SYSTEM — Colors & Type
   PT. Staris Semesta Perkasa
   ========================================================================= */

/* ---------- Webfonts ----------
   Space Grotesk — geometric sans, technical edge, less overused than Inter.
   JetBrains Mono — telemetry / sensor IDs / numeric data.
   Both free, Google Fonts. Substitute with self-hosted .woff2 in production.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================================
     COLOR — Base palette
     Sentra leans on a warm "instrument brass" gold as the brand accent,
     anchored by deep graphite neutrals. The gold is used sparingly — as
     a live-channel indicator, not as a fill across whole surfaces.
     ========================================================================= */

  /* Gold (brand) — calibrated from the Sentra mark (#f8d913).
     Bright, high-luminance — reads as "live electrical signal," not aged brass. */
  --gold-50:  #fefce5;
  --gold-100: #fef7b8;
  --gold-200: #fded7a;
  --gold-300: #fbe041;
  --gold-400: #f8d913;   /* brand mark color */
  --gold-500: #e6c40c;   /* primary on-screen gold (slightly toned for contrast) */
  --gold-600: #b89705;
  --gold-700: #8a7008;
  --gold-800: #5e4d0b;
  --gold-900: #38300b;

  /* Graphite (neutrals) — cool, slightly blued for control-room feel */
  --graphite-0:   #ffffff;
  --graphite-25:  #fafafb;
  --graphite-50:  #f4f5f7;
  --graphite-100: #e8eaee;
  --graphite-200: #d2d6dd;
  --graphite-300: #aab1bc;
  --graphite-400: #7d8593;
  --graphite-500: #565d6b;
  --graphite-600: #3c424d;
  --graphite-700: #272b34;
  --graphite-800: #181b22;
  --graphite-900: #0e1015;
  --graphite-950: #07080b;

  /* Status — engineered for industrial telemetry, not consumer SaaS */
  --status-normal:   #2f9461;   /* green — within spec */
  --status-normal-bg:#e7f3ec;
  --status-info:     #2c6fb8;   /* blue — informational */
  --status-info-bg:  #e6effa;
  --status-warn:     #d99216;   /* amber — attention, near limit */
  --status-warn-bg:  #fcf2dc;
  --status-trip:     #c63d3d;   /* red — fault / tripped / alarm */
  --status-trip-bg:  #faeaea;
  --status-offline:  #7d8593;   /* gray — offline / unknown */
  --status-offline-bg:#eef0f3;

  /* =========================================================================
     SEMANTIC TOKENS — light theme (default)
     Industrial dashboards spend most time in dark mode; we still ship light
     for admin/marketing surfaces.
     ========================================================================= */

  /* Surfaces */
  --bg-canvas:     var(--graphite-25);   /* page background */
  --bg-surface:    var(--graphite-0);    /* card / panel */
  --bg-sunken:     var(--graphite-50);   /* inset wells, tables */
  --bg-raised:     var(--graphite-0);    /* menus, popovers */
  --bg-overlay:    rgba(14, 16, 21, 0.55);

  /* Foregrounds */
  --fg-1:          var(--graphite-900);  /* primary text */
  --fg-2:          var(--graphite-600);  /* secondary text */
  --fg-3:          var(--graphite-400);  /* tertiary / labels */
  --fg-4:          var(--graphite-300);  /* disabled */
  --fg-on-gold:    var(--graphite-900);  /* text on gold fill */
  --fg-on-dark:    var(--graphite-50);

  /* Borders & dividers */
  --border-subtle: var(--graphite-100);
  --border-default:var(--graphite-200);
  --border-strong: var(--graphite-300);
  --border-focus:  var(--gold-500);

  /* Brand accents (semantic) */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-700);
  --accent-soft:   var(--gold-50);
  --accent-on:     var(--graphite-900);  /* readable on gold */

  /* =========================================================================
     TYPOGRAPHY
     Space Grotesk for everything human-readable.
     JetBrains Mono for IDs, telemetry, addresses, codes.
     ========================================================================= */

  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

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

  /* Type scale — designed for dense industrial UI; smaller body than typical SaaS */
  --fs-display:  44px;
  --fs-h1:       32px;
  --fs-h2:       24px;
  --fs-h3:       18px;
  --fs-h4:       15px;
  --fs-body:     14px;
  --fs-small:    13px;
  --fs-caption:  12px;
  --fs-label:    11px;   /* uppercase mono labels */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-label:   0.08em;   /* for ALL-CAPS mono labels */

  /* =========================================================================
     SPACING — 4px base
     ========================================================================= */
  --space-0:   0;
  --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;

  /* =========================================================================
     RADII — sharp, instrument-like. No friendly bubbles.
     ========================================================================= */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-pill: 999px;

  /* =========================================================================
     ELEVATION — minimal. Industrial UIs use borders, not shadows.
     ========================================================================= */
  --shadow-1: 0 1px 0 rgba(14, 16, 21, 0.04), 0 1px 2px rgba(14, 16, 21, 0.04);
  --shadow-2: 0 2px 4px rgba(14, 16, 21, 0.06), 0 1px 2px rgba(14, 16, 21, 0.04);
  --shadow-3: 0 6px 16px rgba(14, 16, 21, 0.08), 0 2px 4px rgba(14, 16, 21, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(14, 16, 21, 0.04);

  /* Focus ring — gold, double-ring for accessibility on light + dark */
  --ring-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--gold-500);

  /* =========================================================================
     MOTION — fast, mechanical. No bouncy easings.
     ========================================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.1, 1);
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 320ms;

  /* =========================================================================
     LAYOUT
     ========================================================================= */
  --max-content: 1280px;
  --grid-gutter: 16px;
  --side-rail: 240px;
}

/* =========================================================================
   DARK THEME — control-room default for SCADA + ops surfaces
   ========================================================================= */
[data-theme="dark"], .theme-dark {
  --bg-canvas:     var(--graphite-950);
  --bg-surface:    var(--graphite-900);
  --bg-sunken:     var(--graphite-950);
  --bg-raised:     var(--graphite-800);
  --bg-overlay:    rgba(0, 0, 0, 0.7);

  --fg-1:          var(--graphite-50);
  --fg-2:          var(--graphite-300);
  --fg-3:          var(--graphite-400);
  --fg-4:          var(--graphite-500);

  --border-subtle: var(--graphite-800);
  --border-default:var(--graphite-700);
  --border-strong: var(--graphite-600);

  --status-normal-bg: rgba(47, 148, 97, 0.16);
  --status-info-bg:   rgba(44, 111, 184, 0.16);
  --status-warn-bg:   rgba(217, 146, 22, 0.18);
  --status-trip-bg:   rgba(198, 61, 61, 0.18);
  --status-offline-bg:rgba(125, 133, 147, 0.16);

  --accent-soft:   rgba(200, 148, 31, 0.14);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.5);
  --ring-focus: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--gold-400);
}

/* =========================================================================
   BASE / RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';   /* tabular-friendly variants */
}

/* =========================================================================
   SEMANTIC TYPE STYLES — apply directly via class
   ========================================================================= */
.t-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

.t-h2, h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

.t-h3, h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.t-h4, h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.t-body, p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0;
}

.t-small { font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-base); }
.t-caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-snug); }

/* Industrial label — ALL CAPS, mono, letter-spaced. Used for sensor names,
   panel headers, channel IDs. The signature type element of the brand. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-3);
  line-height: 1.2;
}

/* Telemetry / numeric readouts — tabular figures, mono */
.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
  font-variant-numeric: tabular-nums;
}

.t-readout {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Link */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); }

/* Selection */
::selection { background: var(--gold-200); color: var(--graphite-900); }

/* Focus visible — uniform ring */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-2);
}

/* Schematic grid — utility background for control-room surfaces */
.bg-schematic {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-theme="dark"] .bg-schematic,
.theme-dark .bg-schematic {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}