/*
 * SITE-1 Design Tokens
 * v1.0 — February 2026
 *
 * Two fonts. One accent. The restraint is the brand.
 */

/* ═══════════════════════════════════
   IMPORT FONTS
   Only two. Inter + JetBrains Mono.
═══════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  /* ── Color ── */
  --s1-bg:          #0d1117;
  --s1-surface:     rgba(255, 255, 255, 0.04);
  --s1-border:      rgba(255, 255, 255, 0.08);
  --s1-text:        rgba(255, 255, 255, 0.87);
  --s1-text-muted:  rgba(255, 255, 255, 0.40);
  --s1-text-dim:    rgba(255, 255, 255, 0.15);

  /* Accent — active states ONLY */
  --s1-accent:      #4fc3f7;

  /* Status — 6px dots ONLY */
  --s1-success:     #66bb6a;
  --s1-warning:     #ffa726;
  --s1-error:       #ef5350;

  /* ── Typography ── */
  --s1-font-display:  'Inter', -apple-system, sans-serif;
  --s1-font-body:     'Inter', -apple-system, sans-serif;
  --s1-font-mono:     'JetBrains Mono', monospace;

  /* ── Font Weights ── */
  --s1-weight-ultralight: 200;  /* Logo, display, headings — LOCKED */
  --s1-weight-light:      300;  /* Subheadings, mono text — LOCKED */
  --s1-weight-regular:    400;  /* Body, captions — LOCKED */
  /* No bold. No medium. No semibold. These three weights are the entire system. */

  /* ── Type Scale ── */
  --s1-text-display:    48px;
  --s1-text-heading:    28px;
  --s1-text-subheading: 16px;
  --s1-text-body:       16px;
  --s1-text-caption:    12px;
  --s1-text-data:       13px;
  --s1-text-label:      10px;

  /* ── Tracking ── */
  --s1-tracking-display:    0.35em;
  --s1-tracking-heading:    0.15em;
  --s1-tracking-subheading: 0.08em;
  --s1-tracking-body:       normal;
  --s1-tracking-label:      0.05em;

  /* ── Line Height ── */
  --s1-leading-tight:   1.2;
  --s1-leading-normal:  1.625;
  --s1-leading-relaxed: 1.8;

  /* ── Spacing (base 8px) ── */
  --s1-space-1:  4px;
  --s1-space-2:  8px;
  --s1-space-3:  12px;
  --s1-space-4:  16px;
  --s1-space-5:  24px;
  --s1-space-6:  32px;
  --s1-space-7:  48px;
  --s1-space-8:  64px;
  --s1-space-9:  96px;
  --s1-space-10: 128px;

  /* ── Borders ── */
  --s1-border-width: 1px;
  --s1-border-style: solid;
  --s1-radius:       0;  /* No rounded elements */

  /* ── Transitions ── */
  --s1-transition-fast:   150ms ease;
  --s1-transition-normal: 250ms ease;
  --s1-transition-slow:   400ms ease;
}


/* ═══════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════ */

/* Wordmark */
.s1-wordmark {
  font-family: var(--s1-font-display);
  font-weight: var(--s1-weight-ultralight);
  letter-spacing: var(--s1-tracking-display);
  text-transform: uppercase;
  color: var(--s1-text);
}

/* Display */
.s1-display {
  font-family: var(--s1-font-display);
  font-weight: var(--s1-weight-ultralight);
  font-size: var(--s1-text-display);
  letter-spacing: var(--s1-tracking-display);
  text-transform: uppercase;
  color: var(--s1-text);
}

/* Heading */
.s1-heading {
  font-family: var(--s1-font-display);
  font-weight: var(--s1-weight-ultralight);
  font-size: var(--s1-text-heading);
  letter-spacing: var(--s1-tracking-heading);
  color: var(--s1-text);
}

/* Subheading */
.s1-subheading {
  font-family: var(--s1-font-body);
  font-weight: var(--s1-weight-light);
  font-size: var(--s1-text-subheading);
  letter-spacing: var(--s1-tracking-subheading);
  color: var(--s1-text);
}

/* Body */
.s1-body {
  font-family: var(--s1-font-body);
  font-weight: var(--s1-weight-light);
  font-size: var(--s1-text-body);
  line-height: var(--s1-leading-normal);
  color: var(--s1-text);
}

/* Caption */
.s1-caption {
  font-family: var(--s1-font-body);
  font-weight: var(--s1-weight-regular);
  font-size: var(--s1-text-caption);
  color: var(--s1-text-muted);
}

/* Data / Mono */
.s1-data {
  font-family: var(--s1-font-mono);
  font-weight: var(--s1-weight-light);
  font-size: var(--s1-text-data);
  line-height: var(--s1-leading-relaxed);
  color: var(--s1-text);
}

/* System label */
.s1-label {
  font-family: var(--s1-font-mono);
  font-weight: var(--s1-weight-light);
  font-size: var(--s1-text-label);
  letter-spacing: var(--s1-tracking-label);
  color: var(--s1-text-muted);
}

/* Status dot */
.s1-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.s1-status-dot--ok      { background: var(--s1-success); }
.s1-status-dot--warning { background: var(--s1-warning); }
.s1-status-dot--error   { background: var(--s1-error); }
.s1-status-dot--active  { background: var(--s1-accent); }

/* Surface */
.s1-surface {
  background: var(--s1-surface);
  border: var(--s1-border-width) var(--s1-border-style) var(--s1-border);
}

/* Active tab pattern */
.s1-tab {
  font-family: var(--s1-font-body);
  font-weight: var(--s1-weight-light);
  font-size: var(--s1-text-caption);
  color: var(--s1-text-muted);
  padding: 14px 24px;
  border-bottom: 1px solid transparent;
  transition: color var(--s1-transition-fast),
              border-color var(--s1-transition-fast);
  cursor: pointer;
}
.s1-tab:hover {
  color: var(--s1-text);
}
.s1-tab.active {
  color: var(--s1-accent);
  border-bottom-color: var(--s1-accent);
}