/* PowerLogic Inc. — design tokens v1.0
   Colour values sampled from the company logo artwork.
   Use these custom properties instead of literal hex values. */

:root {
  /* Brand */
  --pl-navy-900: #07162D; /* Panel Navy — ink, dark bands, footer */
  --pl-navy-700: #0E2A4A; /* cards/dividers inside navy sections */
  --pl-blue-800: #0D53A8; /* primary hover / pressed, visited links */
  --pl-blue-600: #1161C4; /* Signal Blue — the only action colour */
  --pl-blue-500: #226ED5; /* bolt highlight; hover on dark only */

  /* Neutrals */
  --pl-surface: #FFFFFF;
  --pl-bg: #F5F7FA;
  --pl-border: #E4E9F0;
  --pl-border-strong: #C9D2DE; /* form field borders */
  --pl-ink: #07162D;
  --pl-ink-2: #3D4C5E;         /* secondary body ink on white */
  --pl-muted: #64707F;         /* 4.9:1 on white */
  --pl-disabled-bg: #EEF1F6;
  --pl-disabled-ink: #97A1AE;

  /* On navy */
  --pl-on-navy: #FFFFFF;
  --pl-on-navy-body: #C6D4E4;
  --pl-on-navy-muted: #9FB3CC;
  --pl-on-navy-accent: #4A9BEA; /* eyebrows on navy ONLY — never on white */
  --pl-on-navy-link: #7FB4F0;

  /* Status */
  --pl-success: #1E7A4C;
  --pl-success-bg: #E7F4ED;
  --pl-warning: #96600A;
  --pl-warning-bg: #FFF8E8;
  --pl-error: #9B1C1C;
  --pl-error-bg: #FEF6F6;

  /* Type */
  --pl-font-display: 'Saira', sans-serif;
  --pl-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --pl-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pl-text-h1: 56px;   --pl-text-h1-m: 34px;
  --pl-text-h2: 34px;   --pl-text-h2-m: 26px;
  --pl-text-h3: 22px;   --pl-text-h3-m: 20px;
  --pl-text-lead: 19px; --pl-text-lead-m: 17px;
  --pl-text-body: 16px;
  --pl-text-sm: 14px;
  --pl-text-label: 12px;

  --pl-lh-h1: 1.04; --pl-lh-h2: 1.12; --pl-lh-h3: 1.2;
  --pl-lh-lead: 1.58; --pl-lh-body: 1.62;
  --pl-track-h1: -0.015em; --pl-track-h2: -0.01em; --pl-track-label: 0.16em;

  /* Shape */
  --pl-radius-sm: 2px;  /* buttons, inputs */
  --pl-radius-md: 6px;  /* cards, media */
  --pl-radius-pill: 999px; /* status chips only */
  --pl-shadow-hover: 0 1px 2px rgba(7,22,45,.06), 0 8px 20px rgba(7,22,45,.06);
  --pl-accent-rule: 3px; /* Signal Blue card top rule */

  /* Space — 4px base */
  --pl-space-1: 4px;  --pl-space-2: 8px;  --pl-space-4: 16px;
  --pl-space-6: 24px; --pl-space-10: 40px; --pl-space-16: 64px;
  --pl-space-24: 96px;

  /* Layout */
  --pl-container: 1200px;
  --pl-gutter: 24px;
  --pl-pad-page: 20px;
  --pl-header-h: 88px;
  --pl-control-h: 48px;
  --pl-tap-min: 44px;

  /* Motion */
  --pl-ease: cubic-bezier(0, 0, 0.2, 1);
  --pl-dur: 180ms;
}

@media (min-width: 640px)  { :root { --pl-pad-page: 32px; } }
@media (min-width: 1024px) { :root { --pl-pad-page: 48px; } }
@media (max-width: 639px)  { :root { --pl-header-h: 64px; } }

/* Base */
body {
  margin: 0;
  background: var(--pl-bg);
  color: var(--pl-ink);
  font-family: var(--pl-font-body);
  font-size: var(--pl-text-body);
  line-height: var(--pl-lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--pl-font-display); font-weight: 600; margin: 0; }
h1 { font-size: var(--pl-text-h1-m); line-height: var(--pl-lh-h1); letter-spacing: var(--pl-track-h1); }
h2 { font-size: var(--pl-text-h2-m); line-height: var(--pl-lh-h2); letter-spacing: var(--pl-track-h2); }
h3 { font-size: var(--pl-text-h3-m); line-height: var(--pl-lh-h3); }
@media (min-width: 768px) {
  h1 { font-size: var(--pl-text-h1); }
  h2 { font-size: var(--pl-text-h2); }
  h3 { font-size: var(--pl-text-h3); }
}
p { max-width: 70ch; }
a { color: var(--pl-blue-600); text-decoration: none; }
a:hover { color: var(--pl-blue-800); text-decoration: underline; }
a:visited { color: var(--pl-blue-800); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pl-blue-600);
  outline-offset: 2px;
}

.pl-eyebrow {
  font-family: var(--pl-font-mono);
  font-size: var(--pl-text-label);
  font-weight: 500;
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-muted);
}

.pl-container {
  max-width: var(--pl-container);
  margin-inline: auto;
  padding-inline: var(--pl-pad-page);
}

.pl-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-md);
  padding: var(--pl-space-6);
  transition: box-shadow var(--pl-dur) var(--pl-ease);
}
.pl-card:hover { box-shadow: var(--pl-shadow-hover); }
.pl-card--scope { border-top: var(--pl-accent-rule) solid var(--pl-blue-600); }

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pl-control-h);
  padding: 14px 26px;
  border-radius: var(--pl-radius-sm);
  font-family: var(--pl-font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease),
              border-color var(--pl-dur) var(--pl-ease);
}
.pl-btn--primary { background: var(--pl-blue-600); border: 1px solid var(--pl-blue-600); color: #fff; }
.pl-btn--primary:hover { background: var(--pl-blue-800); border-color: var(--pl-blue-800); }
.pl-btn--secondary { background: var(--pl-surface); border: 1px solid var(--pl-navy-900); color: var(--pl-navy-900); }
.pl-btn--secondary:hover { background: var(--pl-navy-900); color: #fff; }
.pl-btn:disabled {
  background: var(--pl-disabled-bg);
  border: 1px solid var(--pl-border);
  color: var(--pl-disabled-ink);
  cursor: not-allowed;
}

.pl-field { display: grid; gap: 7px; }
.pl-field > span { font-size: 13px; font-weight: 600; color: var(--pl-ink); }
.pl-field input, .pl-field select, .pl-field textarea {
  font-family: var(--pl-font-body);
  font-size: 15px;
  color: var(--pl-ink);
  padding: 13px 14px;
  border: 1px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--pl-surface);
}
.pl-field[data-invalid] input { border-color: var(--pl-error); background: var(--pl-error-bg); }

.pl-chip {
  font-family: var(--pl-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--pl-radius-pill);
  padding: 5px 11px;
}
.pl-chip--done { color: var(--pl-success); background: var(--pl-success-bg); }
.pl-chip--wip  { color: var(--pl-blue-800); background: #E6EFFA; }

.pl-section--navy { background: var(--pl-navy-900); color: var(--pl-on-navy); }
.pl-section--navy p { color: var(--pl-on-navy-body); }
.pl-section--navy a { color: var(--pl-on-navy-link); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}