/* ==========================================================================
   gp-site.css  -  shared stylesheet for getplane.ai
   --------------------------------------------------------------------------
   Canonical source for tokens: the GetPlane platform style guide
     (chassis) http://127.0.0.1:5005/style-guide/
     (file)    <GetPlane dev tree>/platform/modules/chromedaddy/static/style-guide/getplane-palette.html
   Do not invent near-miss values. If a value isn't a token here, add the
   token from the guide rather than a raw hex.

   Website-specific rules (2026-09-30):
   - Type is the guide's scale x --web-font-ratio (1.25). Tune the ratio,
     never individual sizes.
   - #ffffff and #555555 are allowed as design elements (wordmark, borders),
     never for reading text.
   ========================================================================== */

:root {
  /* ---- backgrounds, darkest to lightest ---- */
  --gp-bg-page:    #000000;
  --gp-bg-shell:   rgb(18, 22, 28);
  --gp-bg-pill:    rgb(27, 27, 27);
  --gp-bg-inset:   rgb(30, 36, 46);
  --gp-bg-input:   rgb(40, 46, 56);
  --gp-bg-bar:     rgb(50, 57, 68);
  --gp-bg-panel:   rgb(60, 68, 80);

  /* ---- brand blue: the accent is the wordmark blue ---- */
  --gp-accent:     #2196f3;
  --gp-blue-100:   rgba(33, 150, 243, 0.08);
  --gp-blue-200:   rgba(33, 150, 243, 0.18);
  --gp-blue-300:   rgba(33, 150, 243, 0.40);
  --gp-blue-500:   #5a6a8c;
  --gp-blue-600:   rgb(30, 52, 115);
  --gp-blue-700:   rgb(20, 36, 80);
  --gp-blue-label: #7a9ed2;

  /* ---- status ---- */
  --gp-yellow-fill:   rgb(80, 60, 18);
  --gp-yellow-border: #ffc000;

  /* ---- text ---- */
  --gp-text-white:     #ffffff;   /* design elements only - never reading text */
  --gp-text-primary:   #e0e0e0;
  --gp-text-secondary: #cccccc;
  --gp-text-muted:     #aaaaaa;
  --gp-text-disabled:  #888888;   /* de-emphasized chart series, not sentences */

  /* ---- borders ---- */
  --gp-border-strong:  #777777;
  --gp-border-divider: #555555;   /* lines only - never text */
  --gp-border-subtle:  rgba(255, 255, 255, 0.08);

  /* ---- type ----
     The guide's stacks are Windows fonts. Public visitors on macOS/iOS need
     native fallbacks or they get Tahoma and generic Courier. Windows renders
     exactly as the guide specifies. */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

  /* ---- THE web font adjustment ratio ---- */
  --web-font-ratio: 1.25;

  /* guide scale x ratio - use these, never raw px, for text */
  --fs-xs:   calc(10px * var(--web-font-ratio));   /* 12.5  */
  --fs-sm:   calc(11px * var(--web-font-ratio));   /* 13.75 */
  --fs-base: calc(12px * var(--web-font-ratio));   /* 15    */
  --fs-md:   calc(13px * var(--web-font-ratio));   /* 16.25 */
  --fs-lg:   calc(16px * var(--web-font-ratio));   /* 20    */
  --fs-xl:   calc(17px * var(--web-font-ratio));   /* 21.25 */
  --fs-2xl:  calc(20px * var(--web-font-ratio));   /* 25    */

  /* ---- radius / spacing / effects ---- */
  --radius-sm: 3px;  --radius-md: 4px;  --radius-lg: 6px;  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --shadow-popup: 0 6px 24px rgba(0, 0, 0, 0.55);

  /* ---- site layout ---- */
  --site-max: 1180px;
  --site-gutter: clamp(16px, 4vw, 56px);

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gp-bg-page);
  color: var(--gp-text-primary);
  font: 400 var(--fs-base)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--font-sans); color: var(--gp-text-primary); font-weight: 700; text-wrap: balance; }
p { margin: 0; }
a { color: var(--gp-accent); }
code { font: 400 .92em var(--font-mono); color: var(--gp-accent); }
img { max-width: 100%; height: auto; }   /* width/height attrs reserve layout; this keeps the aspect ratio */

/* ---------- site chrome ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 14px var(--site-gutter);
  background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gp-border-subtle);
}
.site-nav .brand img { height: 30px; width: auto; display: block; }
.site-nav .links { display: flex; gap: clamp(14px, 2.5vw, 30px); align-items: center; flex-wrap: wrap; }
.site-nav .links a {
  font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gp-text-muted); text-decoration: none; transition: color .2s;
}
.site-nav .links a:hover, .site-nav .links a[aria-current="page"] { color: var(--gp-accent); }
@media (max-width: 620px) {
  .site-nav { flex-wrap: wrap; row-gap: 10px; }
  .site-nav .links { width: 100%; justify-content: space-between; gap: 10px; }
  .site-nav .links a { letter-spacing: .06em; }
}

.site-foot {
  max-width: var(--site-max); margin: 0 auto; padding: 28px var(--site-gutter) 40px;
  border-top: 1px solid var(--gp-border-divider);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--gp-text-muted); letter-spacing: .04em;
}
.site-foot a { color: var(--gp-text-muted); text-decoration: none; }
.site-foot a:hover { color: var(--gp-accent); }

/* ---------- sections ---------- */
.section { max-width: var(--site-max); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--site-gutter); }
.section + .section { border-top: 1px solid var(--gp-border-subtle); }

/* ---------- shared components (vocabulary from the benchmark report) ---------- */
.label {
  font: 700 var(--fs-sm)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gp-accent);
}
.sec-head { display: grid; gap: var(--space-3); max-width: 78ch; margin-bottom: var(--space-6); }
.sec-head h2 { font-size: clamp(28px, 4.2vw, calc(34px * var(--web-font-ratio))); line-height: 1.12; }
.sec-head p { color: var(--gp-text-secondary); font-size: var(--fs-md); }

.panel {
  background: var(--gp-bg-shell); border: 1px solid var(--gp-border-divider);
  border-radius: var(--radius-lg); padding: clamp(16px, 2.4vw, 24px);
}
.panel-accent {
  border: 1.5px solid var(--gp-accent);
  background: linear-gradient(180deg, var(--gp-blue-200), transparent 72%), var(--gp-bg-shell);
}
.accent { color: var(--gp-accent); }
.note { font: 400 var(--fs-xs)/1.55 var(--font-mono); color: var(--gp-text-muted); }

.cta {
  display: inline-block; padding: 13px 26px;
  font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gp-accent); text-decoration: none;
  border: 1.5px solid var(--gp-accent); border-radius: var(--radius-md);
  transition: background .2s, color .2s;
}
.cta:hover { background: var(--gp-blue-200); color: var(--gp-text-primary); }

.num { font-variant-numeric: tabular-nums; }