/* ============================================================
 * GRF Design System — Tokens
 * Drop this file into any GRF surface:
 *   <link rel="stylesheet" href="/colors_and_type.css">
 *   <link rel="stylesheet" href="/fonts/fonts.css">
 * All tokens are dark-mode-first. There is no light mode.
 * ============================================================ */

@import url('./fonts/fonts.css');

:root {
  /* ----------- CORE PALETTE ---------------------------------- */
  /* Neutrals: 12-step scale from bleed-black to bone-white */
  --c-ink-0:   #04060A;  /* page bleed */
  --c-ink-1:   #070A12;  /* primary bg */
  --c-ink-2:   #0A1530;  /* panel bg (deep navy) */
  --c-ink-3:   #0F1D3D;  /* raised panel */
  --c-ink-4:   #16264F;  /* hover / pressed bg */
  --c-ink-5:   #1F3164;  /* border-strong */
  --c-line-1:  rgba(255,255,255,0.06);  /* hairline default */
  --c-line-2:  rgba(255,255,255,0.10);  /* hairline emphasized */
  --c-line-3:  rgba(255,255,255,0.16);  /* hairline strong */

  --c-fog-1:   #6B7A99;  /* tertiary text, axis labels */
  --c-fog-2:   #9AA8C2;  /* secondary text */
  --c-fog-3:   #C7D1E3;  /* primary body text */
  --c-bone:    #E5ECFA;  /* near-white, max contrast */
  --c-white:   #FFFFFF;

  /* ----------- ACCENTS --------------------------------------- */
  --c-orange:        #FF6A1A;  /* GRF orange — primary accent */
  --c-orange-soft:   #FF8A4D;  /* hover/secondary */
  --c-orange-deep:   #C44A0E;  /* pressed */
  --c-orange-glow:   rgba(255, 106, 26, 0.45);

  --c-sky:           #7AB6FF;  /* "Cognitive Layer" headings */
  --c-sky-soft:      rgba(122, 182, 255, 0.18);
  --c-sand:          #F4E9A1;  /* featured quote tiles */
  --c-sand-soft:     rgba(244, 233, 161, 0.16);

  /* ----------- STATUS ---------------------------------------- */
  --c-ok:      #3FCF8E;
  --c-warn:    #FFB547;
  --c-fault:   #FF5A5A;
  --c-idle:    #6B7A99;
  --c-ok-soft:    rgba(63, 207, 142, 0.18);
  --c-warn-soft:  rgba(255, 181, 71, 0.18);
  --c-fault-soft: rgba(255, 90, 90, 0.18);

  /* ----------- SEMANTIC -------------------------------------- */
  --bg-page:      var(--c-ink-0);
  --bg-app:       var(--c-ink-1);
  --bg-panel:     var(--c-ink-2);
  --bg-panel-2:   var(--c-ink-3);
  --bg-hover:     var(--c-ink-4);

  --fg-primary:   var(--c-bone);
  --fg-secondary: var(--c-fog-3);
  --fg-tertiary:  var(--c-fog-2);
  --fg-muted:     var(--c-fog-1);
  --fg-onAccent:  #0B0E14;

  --border:       var(--c-line-1);
  --border-strong:var(--c-line-2);
  --border-hot:   var(--c-orange);

  --accent:       var(--c-orange);
  --accent-soft:  var(--c-orange-glow);
  --accent-2:     var(--c-sky);
  --accent-3:     var(--c-sand);

  /* ----------- TYPE ------------------------------------------ */
  --font-display: 'Bricolage Grotesque', 'Inter Display', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:    'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Display scale */
  --t-hero:    clamp(64px, 8vw, 128px);  /* @kind font */
  --t-h1:      clamp(48px, 5.2vw, 84px); /* @kind font */
  --t-h2:      clamp(36px, 3.6vw, 56px); /* @kind font */
  --t-h3:      clamp(24px, 2vw, 32px);   /* @kind font */
  --t-h4:      20px;  /* @kind font */
  --t-h5:      16px;  /* @kind font */

  --t-body:    16px;  /* @kind font */
  --t-body-lg: 18px;  /* @kind font */
  --t-body-sm: 14px;  /* @kind font */
  --t-caption: 13px;  /* @kind font */
  --t-eyebrow: 11px;  /* @kind font */
  --t-mono:    13px;  /* @kind font */
  --t-mono-sm: 11px;  /* @kind font */

  --lh-display: 1.02;  /* @kind font */
  --lh-heading: 1.12;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-tight:   1.2;   /* @kind font */

  --tr-display: -0.02em;  /* @kind font */
  --tr-tight:   -0.01em;  /* @kind font */
  --tr-eyebrow:  0.18em;  /* @kind font */
  --tr-mono:     0.02em;  /* @kind font */

  /* ----------- SPACING (8pt) --------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ----------- RADII ----------------------------------------- */
  --r-0:    0;     /* @kind radius */
  --r-1:    2px;
  --r-2:    6px;
  --r-3:    12px;
  --r-pill: 999px;

  /* ----------- SHADOW / GLOW --------------------------------- */
  --shadow-panel:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -30px rgba(0,0,0,0.9);
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 40px -20px rgba(0,0,0,0.8);
  --glow-orange:
    0 0 0 1px rgba(255,106,26,0.35),
    0 0 32px -4px rgba(255,106,26,0.55);
  --glow-sky:
    0 0 0 1px rgba(122,182,255,0.25),
    0 0 28px -8px rgba(122,182,255,0.4);
  --glow-ok:
    0 0 0 1px rgba(63,207,142,0.3),
    0 0 20px -6px rgba(63,207,142,0.45);

  /* ----------- MOTION ---------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);  /* @kind other */
  --t-fast:      120ms;  /* @kind other */
  --t-base:      240ms;  /* @kind other */
  --t-slow:      600ms;  /* @kind other */
  --t-reveal:    900ms;  /* @kind other */

  /* ----------- LAYOUT ---------------------------------------- */
  --content-max: 1440px;
  --rail:        56px;     /* left margin section labels */
  --topbar-h:    64px;
  --hud-h:       40px;
  --grid-size:   48px;     /* blueprint grid */
}

/* ============================================================
 * ELEMENT-LEVEL DEFAULTS — opt in by including this file
 * ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-orange);
  color: var(--fg-onAccent);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); letter-spacing: var(--tr-tight); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-orange-soft); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ============================================================
 * UTILITY CLASSES
 * ============================================================ */

.grf-hero       { font-family: var(--font-display); font-size: var(--t-hero); font-weight: 600; letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.grf-h1         { font-family: var(--font-display); font-size: var(--t-h1);   font-weight: 600; letter-spacing: var(--tr-display); line-height: var(--lh-heading); }
.grf-h2         { font-family: var(--font-display); font-size: var(--t-h2);   font-weight: 600; letter-spacing: var(--tr-display); line-height: var(--lh-heading); }
.grf-h3         { font-family: var(--font-display); font-size: var(--t-h3);   font-weight: 600; letter-spacing: var(--tr-tight);   line-height: var(--lh-heading); }
.grf-body       { font-size: var(--t-body);     line-height: var(--lh-body); color: var(--fg-secondary); }
.grf-body-lg    { font-size: var(--t-body-lg);  line-height: var(--lh-body); color: var(--fg-secondary); }
.grf-body-sm    { font-size: var(--t-body-sm);  line-height: var(--lh-body); color: var(--fg-tertiary); }
.grf-eyebrow    { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent); }
.grf-mono       { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg-tertiary); }
.grf-mono-sm    { font-family: var(--font-mono); font-size: var(--t-mono-sm); letter-spacing: var(--tr-mono); color: var(--fg-muted); }

.grf-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-panel);
}

.grf-telem {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-0);
}

.grf-glass {
  background: rgba(10, 21, 48, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
}

.grf-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Corner brackets — wrap a positioned element, add the brackets via ::before / ::after */
.grf-brackets { position: relative; }
.grf-brackets::before,
.grf-brackets::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.grf-brackets::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.grf-brackets::after  { bottom: -1px; right: -1px; border-left:  0; border-top:    0; }

/* Buttons */
.grf-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-5);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--r-2);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.grf-btn:hover { border-color: var(--c-line-3); background: var(--bg-hover); }
.grf-btn:active { opacity: 0.85; }

.grf-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-onAccent);
}
.grf-btn--primary:hover {
  background: var(--c-orange-soft);
  border-color: var(--c-orange-soft);
  box-shadow: var(--glow-orange);
}

.grf-btn--ghost {
  border-color: transparent;
}
.grf-btn--ghost:hover { background: var(--bg-hover); }

/* Status pill */
.grf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  border: 1px solid;
}
.grf-pill--ok    { background: var(--c-ok-soft);    color: var(--c-ok);    border-color: rgba(63,207,142,0.4); }
.grf-pill--warn  { background: var(--c-warn-soft);  color: var(--c-warn);  border-color: rgba(255,181,71,0.4); }
.grf-pill--fault { background: var(--c-fault-soft); color: var(--c-fault); border-color: rgba(255,90,90,0.4); }
.grf-pill--idle  { background: transparent;         color: var(--c-idle);  border-color: var(--c-line-2); }
.grf-pill--hot   { background: rgba(255,106,26,0.14); color: var(--c-orange); border-color: rgba(255,106,26,0.45); }

/* Status dot */
.grf-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.grf-dot--ok    { background: var(--c-ok);    box-shadow: 0 0 8px var(--c-ok); }
.grf-dot--warn  { background: var(--c-warn);  box-shadow: 0 0 8px var(--c-warn); }
.grf-dot--fault { background: var(--c-fault); box-shadow: 0 0 8px var(--c-fault); animation: grf-pulse 1.4s infinite; }
.grf-dot--idle  { background: var(--c-idle); }
.grf-dot--hot   { background: var(--c-orange); box-shadow: 0 0 10px var(--c-orange); }

@keyframes grf-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes grf-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes grf-pathway {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}