/* Ordic Operator Console — design tokens
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 * Surface this file globally; do not redefine these values in component CSS.
 *
 * State tone mapping (use these everywhere):
 *   healthy  → green   (live, ok, online, current, default-positive)
 *   warning  → amber   (slow, expiring, overdue, soft-fail, attention)
 *   broken   → red     (failed, destructive, expired, hard-fail)
 *   pending  → blue    (in-progress, info, queued)
 *   idle     → gray    (untouched, unknown, n/a, dismissed)
 */

:root {
  /* ============ Surfaces ============ */
  --surface-canvas:        #f6f4ef;   /* page background, warm stone */
  --surface-raised:        #ffffff;   /* cards, content surfaces */
  --surface-sunken:        #f1efe8;   /* table headers, recessed regions */
  --surface-hover:         #ebe8df;   /* row + button hover */
  --surface-nav:           #1a1f1c;   /* left nav: deep forest */
  --surface-nav-hover:     #232927;
  --surface-nav-active:    #2d3530;
  --surface-inverse:       #1f2820;   /* dark blocks (section divider, console) */

  /* ============ Borders ============ */
  --border-subtle:         #e8e4d8;
  --border-default:        #d9d4c4;
  --border-strong:         #b8b1a0;
  --border-focus:          #4a6b51;

  /* ============ Text ============ */
  --text-primary:          #1c1f1b;
  --text-secondary:        #5b6058;
  --text-tertiary:         #8a8c83;
  --text-quaternary:       #aeac9f;
  --text-on-dark:          #f0eee5;
  --text-on-dark-muted:    #9aa19a;
  --text-link:             #2f5d8a;

  /* ============ Status — green (healthy / brand) ============ */
  --green-50:              #f0f5ed;
  --green-100:             #e2ede0;
  --green-200:             #c5dbc1;
  --green-300:             #9ec196;
  --green-400:             #6e9f67;
  --green-500:             #4a7d4a;   /* sage primary */
  --green-600:             #3a6840;   /* deeper forest, primary action */
  --green-700:             #2d5234;
  --green-800:             #1f3a26;
  --green-text:            #2d5234;

  /* ============ Status — amber (warning) ============ */
  --amber-50:              #fbf5e6;
  --amber-100:             #f6ecc8;
  --amber-200:             #ead9a3;
  --amber-300:             #e0c062;
  --amber-500:             #b08a1f;
  --amber-700:             #7a5d10;
  --amber-text:            #6e530c;

  /* ============ Status — red (broken / destructive) ============ */
  --red-50:                #f8ebe7;
  --red-100:               #f1d6cd;
  --red-200:               #e3b9ae;
  --red-500:               #b04a32;
  --red-700:               #7e2d1c;
  --red-text:              #7e2d1c;

  /* ============ Status — blue (info / pending) ============ */
  --blue-50:               #ecf1f6;
  --blue-200:              #cad8e6;
  --blue-500:              #3a6188;
  --blue-text:             #2f5d8a;

  /* ============ Type ============ */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:    11px;   /* timestamps, labels in tables, footnotes */
  --fs-sm:    12px;   /* secondary metadata */
  --fs-base:  13px;   /* body, table cells */
  --fs-md:    14px;   /* card titles, buttons */
  --fs-lg:    16px;   /* section headers (h4) */
  --fs-xl:    19px;   /* card/page sub-titles (h3) */
  --fs-2xl:   24px;   /* page title (h2) */
  --fs-3xl:   32px;   /* hero page title (h1) */

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;

  /* ============ Spacing — 4px base ============ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ============ Radii — restrained ============ */
  --r-sm:  3px;
  --r-md:  5px;
  --r-lg:  8px;
  --r-xl: 12px;

  /* ============ Shadows — subtle only ============ */
  --shadow-card:  0 1px 0 rgba(28, 31, 27, 0.04), 0 1px 2px rgba(28, 31, 27, 0.05);
  --shadow-pop:   0 4px 12px rgba(28, 31, 27, 0.08), 0 1px 3px rgba(28, 31, 27, 0.06);
  --shadow-modal: 0 16px 48px rgba(28, 31, 27, 0.18);
  --shadow-focus: 0 0 0 3px rgba(74, 107, 81, 0.18);

  /* ============ Motion ============ */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============ Layout ============ */
  --nav-w:        232px;
  --topbar-h:      52px;
  --content-pad:   32px;
  --right-rail-w: 320px;
}

/* ============ Base reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, select, textarea { font: inherit; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ Type utilities ============ */
.h1 { font-size: var(--fs-3xl); font-weight: var(--fw-semi); letter-spacing: -0.025em; line-height: var(--lh-tight); margin: 0; }
.h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: -0.02em;  line-height: var(--lh-tight); margin: 0; }
.h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semi); letter-spacing: -0.015em; line-height: var(--lh-snug); margin: 0; }
.h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semi); letter-spacing: -0.01em;  margin: 0; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'zero', 'ss02';
}

.muted { color: var(--text-secondary); }
.dim   { color: var(--text-tertiary); }