/* Demo Guardian — design tokens v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Azeret+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --dg-amber: #FFB020;
  --dg-amber-hover: #FFC85C;

  /* Neutrals (dark-first) */
  --dg-void: #0B0C0E;
  --dg-panel: #101215;
  --dg-surface: #14161A;
  --dg-hairline: #24272D;
  --dg-hairline-strong: #34383F;

  /* Text */
  --dg-text: #F2F3F5;
  --dg-text-soft: #C7CACF;
  --dg-text-muted: #8B9099;
  --dg-text-faint: #62676F;

  /* Status */
  --dg-pass: #9EE84F;
  --dg-blocked: #FF5A52;
  --dg-info: #6FA8FF;

  /* Status washes */
  --dg-pass-bg: rgba(158, 232, 79, 0.10);
  --dg-pass-border: rgba(158, 232, 79, 0.28);
  --dg-gate-bg: rgba(255, 176, 32, 0.10);
  --dg-gate-border: rgba(255, 176, 32, 0.28);
  --dg-blocked-bg: rgba(255, 90, 82, 0.10);
  --dg-blocked-border: rgba(255, 90, 82, 0.28);

  /* Language dots */
  --dg-lang-rust: #FF7A45;
  --dg-lang-ts: #6FA8FF;
  --dg-lang-go: #4DE1FF;
  --dg-lang-python: #FFB020;
  --dg-lang-yaml: #9EE84F;
  --dg-lang-mdx: #9B7CFF;

  /* Type */
  --dg-font-ui: 'Sora', system-ui, sans-serif;
  --dg-font-mono: 'Azeret Mono', ui-monospace, monospace;

  --dg-size-display: 76px;   /* 600, -0.035em, 0.98 */
  --dg-size-h1: 46px;        /* 600, -0.035em, 1.05 */
  --dg-size-h2: 32px;        /* 600, -0.03em  */
  --dg-size-h3: 26px;        /* 500, -0.02em  */
  --dg-size-body: 16px;      /* 400, 1.6      */
  --dg-size-small: 14px;
  --dg-size-caption: 13px;
  --dg-size-label: 11px;     /* mono, uppercase, 0.16em */

  /* Geometry & spacing (4px base) */
  --dg-radius-sm: 2px;
  --dg-radius: 3px;
  --dg-radius-lg: 5px;
  --dg-space-1: 4px;
  --dg-space-2: 8px;
  --dg-space-3: 12px;
  --dg-space-4: 20px;
  --dg-space-5: 28px;
  --dg-space-6: 44px;
  --dg-space-7: 88px;

  /* Icons: 24px grid, 1.75 stroke, square caps, no fill */
  --dg-icon-stroke: 1.75;
}

body {
  margin: 0;
  background: var(--dg-void);
  color: var(--dg-text);
  font-family: var(--dg-font-ui);
  font-size: var(--dg-size-body);
  line-height: 1.6;
}

a { color: var(--dg-amber); text-decoration: none; }
a:hover { color: var(--dg-amber-hover); }

.dg-label {
  font-family: var(--dg-font-mono);
  font-size: var(--dg-size-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dg-text-faint);
}

.dg-btn {
  font-family: var(--dg-font-ui);
  font-size: var(--dg-size-small);
  font-weight: 600;
  color: var(--dg-void);
  background: var(--dg-amber);
  border: none;
  border-radius: var(--dg-radius);
  padding: 12px 22px;
  cursor: pointer;
}
.dg-btn:hover { background: var(--dg-amber-hover); }

.dg-btn-secondary {
  font-family: var(--dg-font-ui);
  font-size: var(--dg-size-small);
  font-weight: 500;
  color: var(--dg-text);
  background: transparent;
  border: 1px solid var(--dg-hairline-strong);
  border-radius: var(--dg-radius);
  padding: 12px 22px;
  cursor: pointer;
}
.dg-btn-secondary:hover { border-color: var(--dg-amber); color: var(--dg-amber); }

.dg-panel {
  background: var(--dg-panel);
  border: 1px solid var(--dg-hairline);
  border-radius: var(--dg-radius);
}

/* Gate status pills */
.dg-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--dg-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--dg-radius);
  padding: 7px 12px;
}
.dg-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dg-status--pass    { color: var(--dg-pass);    background: var(--dg-pass-bg);    border: 1px solid var(--dg-pass-border); }
.dg-status--gate    { color: var(--dg-amber);   background: var(--dg-gate-bg);    border: 1px solid var(--dg-gate-border); }
.dg-status--blocked { color: var(--dg-blocked); background: var(--dg-blocked-bg); border: 1px solid var(--dg-blocked-border); }