/* ==========================================================================
   NEGS Tech — Design Tokens
   Colors + Typography for both Marketing (dark, premium) and
   Operational (dashboard/document) surfaces.
   ========================================================================== */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ================ BRAND COLORS ================ */
  --brand-navy:        #0f2445;   /* Primary — corporate deep navy (from logo wordmark) */
  --brand-navy-700:    #1a3564;
  --brand-navy-500:    #264a87;
  --brand-orange:      #e65100;   /* Secondary — NEGS electrical orange (from logo mark) */
  --brand-orange-600:  #ef6c00;
  --brand-orange-400:  #ff8a3d;

  /* ================ OPERATIONAL / DARK SURFACE ================ */
  /* For FSM, IoT dashboard, VEGA landing, data-dense interfaces. */
  --bg-0:              #0A0A0B;   /* page background, near-black */
  --bg-1:              #111114;   /* elevated card / panel */
  --bg-2:              #18181B;   /* inset / input surface */
  --bg-3:              #202024;   /* hover surface */
  --border-subtle:     #26262B;   /* hairline divider */
  --border-strong:     #35353C;   /* card border */

  --fg-1:              #F4F4F5;   /* primary text */
  --fg-2:              #A1A1AA;   /* secondary text */
  --fg-3:              #71717A;   /* tertiary / placeholder */
  --fg-4:              #52525B;   /* disabled */

  /* Technical accents — power / energy connotation */
  --accent-electric:   #22D3EE;   /* electric cyan-blue — links, focus, metrics */
  --accent-power:      #34D399;   /* technical green — "online", nominal status */
  --accent-warn:       #FBBF24;   /* amber — warning */
  --accent-danger:     #F87171;   /* red — critical, fault */

  /* UPS status indicators (darker saturated for LED-style chips) */
  --status-online:     #10B981;
  --status-standby:    #3B82F6;
  --status-warn:       #F59E0B;
  --status-fault:      #EF4444;
  --status-offline:    #6B7280;

  /* ================ LIGHT / DOCUMENT SURFACE ================ */
  /* For corporate proposals, teklif PDFs, printable documents. */
  --doc-bg:            #F3F4F6;
  --doc-surface:       #FFFFFF;
  --doc-border:        #E5E7EB;
  --doc-border-strong: #CBD5E1;
  --doc-ink-1:         #0f2445;   /* headings use brand navy */
  --doc-ink-2:         #334155;
  --doc-ink-3:         #64748B;

  /* Semantic bands used in the current proposal app */
  --sem-success:       #2e7d32;
  --sem-danger:        #d32f2f;
  --sem-warning:       #f57c00;
  --sem-info:          #0288d1;
  --sem-neutral:       #455a64;

  /* ================ TYPOGRAPHY ================ */
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — operational surface is tighter; display is looser */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;

  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:    0.08em;

  /* ================ SPACING / RADII / ELEVATION ================ */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;      /* component default — keep it under 8, "serious, not playful" */
  --r-xl: 10px;     /* cards */
  --r-pill: 999px;

  --shadow-card:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-pop:     0 2px 4px rgba(0,0,0,.5), 0 16px 40px -12px rgba(0,0,0,.6);
  --shadow-glow:    0 0 0 1px rgba(34,211,238,.25), 0 0 24px -4px rgba(34,211,238,.35);
  --shadow-doc:     0 1px 2px rgba(15,36,69,.06), 0 10px 24px -8px rgba(15,36,69,.12);
}

/* ---------- Semantic element defaults ---------- */
.typo-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
}
.typo-h1 { font: 600 var(--text-4xl)/1.05 var(--font-display); letter-spacing: var(--tracking-tight); }
.typo-h2 { font: 600 var(--text-3xl)/1.1  var(--font-display); letter-spacing: var(--tracking-tight); }
.typo-h3 { font: 600 var(--text-2xl)/1.2  var(--font-display); letter-spacing: var(--tracking-normal); }
.typo-h4 { font: 600 var(--text-xl)/1.3   var(--font-display); letter-spacing: var(--tracking-normal); }
.typo-body  { font: 400 var(--text-base)/1.55 var(--font-body); }
.typo-small { font: 400 var(--text-sm)/1.5    var(--font-body); }
.typo-micro { font: 500 var(--text-xs)/1.35   var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.typo-metric { font: 500 var(--text-2xl)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.typo-code   { font: 400 var(--text-sm)/1.5 var(--font-mono); }

/* Baseline body defaults for operational (dark) surface */
.surface-ops {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Baseline body defaults for document (light) surface */
.surface-doc {
  background: var(--doc-bg);
  color: var(--doc-ink-1);
  font-family: var(--font-body);
}