/* ============================================================
   Freedom35 Web Design — THEME
   ------------------------------------------------------------
   Dark-first. Derived from the Freedom35Studios mark: near-black
   ground, silver-white letterforms, electric blue edge light.

   A web design studio's own site IS the portfolio piece. Going
   dark is deliberate: it separates us from every beige local
   agency template, and it makes the screenshots of clients'
   (mostly light) sites pop off the page.

   base.css is written light-first but reads only tokens, so a
   dark site is a token swap — no structural CSS changes.
   NOTE the inversion: on a dark ground, --brand-dark must be
   LIGHTER than --brand, because base.css uses it for link text
   and hover states that sit on the dark surface.
   ============================================================ */

:root {
  /* ---------- BRAND — electric blue ---------- */
  --brand: #2E90FF;
  --brand-dark: #6FBAFF;   /* intentionally lighter: it lands on dark surfaces */
  --brand-soft: #12253A;   /* tinted chip background, not a pale tint */
  /* Dark text on the bright blue button. White on #2E90FF is only ~3.1:1 and
     fails WCAG AA; this is ~8.5:1 and reads sharper besides. */
  --brand-on: #06121C;

  /* ---------- ACCENT — the cyan edge light on the logo ---------- */
  --accent: #5FD0FF;
  --accent-dark: #2BB4EE;
  --accent-on: #04121C;

  /* ---------- INK / TEXT ---------- */
  --ink: #FFFFFF;
  --body: #C3CBD6;
  --muted: #8A94A3;

  /* ---------- SURFACES ---------- */
  --canvas: #0C0F14;
  --surface: #161B22;
  --surface-2: #12161D;
  --line: #242B36;
  --line-soft: #1B212A;

  /* ---------- DEEPER SECTIONS ----------
     Used by .section--dark and the footer. Kept a step darker than --canvas so
     those bands still read as distinct on an already-dark page. */
  --dark: #070A0E;
  --dark-2: #0F131A;
  --on-dark: #E6EAF1;
  --on-dark-muted: #98A2B1;

  /* ---------- STATUS ---------- */
  --ok: #3ED598;
  --warn: #FFC46B;
  --danger: #FF7A5C;
  --danger-soft: #2A1611;

  /* ---------- SHAPE ---------- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --max: 1180px;

  /* ---------- DEPTH ----------
     Shadows do almost nothing on a dark ground, so depth comes from surface
     lightness and hairline borders instead. These stay for hover lift. */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .34);
  --shadow: 0 12px 34px -14px rgba(0, 0, 0, .62);
  --shadow-lg: 0 28px 64px -22px rgba(0, 0, 0, .78);
  --ring: 0 0 0 3px rgba(46, 144, 255, .45);

  /* ---------- TYPE ----------
     Space Grotesk for headings: technical, slightly mechanical, distinctive
     without being a novelty face. Inter for body because it is the most
     readable UI face at small sizes.  */
  --display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------- MEASURED AT RUNTIME (js/kit.js) ---------- */
  --header-h: 76px;
}

/* The browser's own UI — form controls, scrollbars — must know this is a dark
   page, or Chrome renders white select dropdowns and a light scrollbar. */
:root { color-scheme: dark; }