/* ============================================================
   Cloud Scope — Design Tokens
   Dark-first, developer-native, terminal energy.
   Neo-grotesk sans + mono, amber/orange accent system.
   ============================================================ */

/* --- Fonts ---------------------------------------------------
   We ship Inter Tight (neo-grotesk substitute for Söhne) and
   JetBrains Mono (plex-mono substitute) via Google Fonts.
   See fonts/README.md for replacement instructions if you
   license the real Söhne / IBM Plex Mono.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Color · Surface (dark primary) --- */
  --bg-0:         #07080a;  /* page base, deepest */
  --bg-1:         #0b0d10;  /* primary surface */
  --bg-2:         #101317;  /* raised card */
  --bg-3:         #161a20;  /* higher card / hover */
  --bg-4:         #1d232b;  /* popover / input bg */

  /* --- Color · Lines --- */
  --line-1:       #1c2128;  /* default divider */
  --line-2:       #262d36;  /* stronger divider / border */
  --line-3:       #323a45;  /* focused input border */

  /* --- Color · Foreground (neutrals) --- */
  --fg-0:         #f4f5f7;  /* primary text / headings */
  --fg-1:         #d6d9de;  /* body */
  --fg-2:         #9aa1ab;  /* secondary / labels */
  --fg-3:         #6b7280;  /* tertiary / placeholders */
  --fg-4:         #434a54;  /* disabled */

  /* --- Color · Brand (amber/orange scale) --- */
  --brand-50:     #fff4ea;
  --brand-100:    #ffe3c9;
  --brand-200:    #ffc48a;
  --brand-300:    #ffa14b;
  --brand-400:    #ff8421;
  --brand-500:    #ff6b35;  /* PRIMARY */
  --brand-600:    #e5521c;
  --brand-700:    #b83e13;
  --brand-800:    #7a2808;
  --brand-900:    #3d1503;

  --accent-amber: #f59e0b;
  --accent-sand:  #fde68a;

  /* --- Color · Semantic --- */
  --ok:           #4ade80;   /* pass / healthy */
  --ok-bg:        #0f2a1a;
  --warn:         #f59e0b;   /* warn / review */
  --warn-bg:      #2a1d08;
  --crit:         #ef4444;   /* critical / fail */
  --crit-bg:      #2a0e0e;
  --info:         #60a5fa;   /* informational */
  --info-bg:      #0c1d33;

  /* Scanner-specific semantic */
  --sev-crit:     #ef4444;
  --sev-high:     #ff6b35;
  --sev-med:      #f59e0b;
  --sev-low:      #60a5fa;
  --sev-none:     #4ade80;

  /* --- Typography families --- */
  --font-sans:    'Inter Tight', 'Söhne', 'Neue Haas Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'Space Mono', 'IBM Plex Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* --- Type scale --- */
  --fs-display:   clamp(48px, 7vw, 96px);
  --fs-h1:        clamp(36px, 4.5vw, 60px);
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-mono-lg:   14px;
  --fs-mono:      13px;
  --fs-mono-sm:   12px;

  /* --- Line-height --- */
  --lh-tight:     1.05;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  /* --- Letter-spacing --- */
  --tracking-display:  -0.035em;
  --tracking-heading:  -0.02em;
  --tracking-body:     -0.005em;
  --tracking-label:    0.08em;   /* uppercase eyebrows */
  --tracking-mono:     0em;

  /* --- Radius --- */
  --r-xs:   3px;
  --r-sm:   5px;   /* most inputs / buttons */
  --r-md:   8px;   /* cards */
  --r-lg:   12px;  /* large panels */
  --r-xl:   20px;
  --r-pill: 999px;

  /* --- Spacing (4px base) --- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
  --s-13: 160px;

  /* --- Shadow / glow ---
     Dark UI: shadows are subtle; glow on focus uses the brand. */
  --shadow-sm:  0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 1px 0 0 rgba(255,255,255,0.04) inset, 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg:  0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.55);
  --glow-brand: 0 0 0 3px rgba(255,107,53,0.25), 0 0 20px rgba(255,107,53,0.35);
  --glow-ok:    0 0 0 3px rgba(74,222,128,0.22);

  /* --- Grid / dot tokens for the terminal backdrop --- */
  --grid-color: rgba(255,255,255,0.035);
  --grid-size:  24px;

  /* --- Motion --- */
  --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       280ms;

  /* --- Layout --- */
  --page-max:   1200px;
  --gutter:     clamp(16px, 4vw, 48px);
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The `hidden` attribute must win over inline `display:flex` on modal
   overlays — user-agent CSS has low specificity and loses to inline
   styles, so force it here. Every visibility toggle in the SPA flips
   this attribute (el.hidden = true/false). */
[hidden] { display: none !important; }

.display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-0);
  font-weight: 600;
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-0);
  font-weight: 600;
  margin: 0;
}

h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-0);
  font-weight: 600;
  margin: 0;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-0);
  font-weight: 600;
  margin: 0;
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-0);
  font-weight: 600;
  margin: 0;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0;
}

p.lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg-1);
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--brand-500);
  font-weight: 500;
}

code, .code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
}

code {
  color: var(--brand-300);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-1);
}

kbd {
  color: var(--fg-1);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: var(--fs-mono-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--line-1);
}

::selection {
  background: var(--brand-500);
  color: #0a0a0a;
}

a {
  color: var(--fg-0);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a:hover {
  border-bottom-color: var(--brand-500);
  color: var(--brand-300);
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-brand);
  border-radius: var(--r-sm);
}