/* SOLO Solar — Design tokens
   Colors and Type. Strict monochromatic + Volt accent.
   Pair with brand book §4 (Colour) and §5 (Typography).
*/

/* ──────────────────────────────────────────────────────────
   FONT FACES
   Neue Haas Grotesk Display Pro is the primary face.
   ABC Gaisyr Mono is the technical/spec face.
   NEVER use italics — emphasis is via weight or scale.
   ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplayMedium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Geist Mono — selected for badges, status pills, and numeric stamps.
   Loaded via Google Fonts CDN. Never used as a body or table face. */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap");

/* ──────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────── */

:root {
  /* Surfaces (monochrome — ~95% of every surface) */
  --solo-white:      #FFFFFF;
  --solo-soft:       #ECECEC;  /* Soft Grey — connective fills, dividers */
  --solo-cool:       #9BA3A6;  /* Cool Gray 7 — secondary text, low-emphasis */
  --solo-dark:       #434544;  /* PMS 445 — dark surface, body on light */
  --solo-black:      #000000;  /* Black 6 — primary text, primary surface */

  /* The accent. ~5% maximum. Never decoration. */
  --solo-volt:       #B5FF59;  /* PMS 2285 */

  /* Aliased semantics (the brand uses neutrals; semantic colors are
     reserved for the digital design tokens — never the brand palette.) */
  --solo-fg:         var(--solo-black);
  --solo-fg-muted:   var(--solo-dark);
  --solo-fg-quiet:   var(--solo-cool);
  --solo-bg:         var(--solo-white);
  --solo-bg-soft:    var(--solo-soft);
  --solo-rule:       var(--solo-soft);
  --solo-rule-strong:var(--solo-cool);

  /* Inverted surfaces */
  --solo-fg-on-dark: var(--solo-white);
  --solo-bg-dark:    var(--solo-black);

  /* System red — digital tokens only, NOT brand palette. */
  --solo-system-red: #D63A1F;

  /* ──────────────────────────────
     Type families
     ────────────────────────────── */
  --solo-font-display: "Neue Haas Display", "Neue Haas Grotesk Display Pro",
                       "Neue Haas Grotesk Text Pro", "Helvetica Neue",
                       Helvetica, Arial, sans-serif;
  --solo-font-body:    "Neue Haas Display", "Neue Haas Grotesk Text Pro",
                       "Helvetica Neue", Helvetica, Arial, sans-serif;
  --solo-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular",
                       Menlo, Consolas, monospace;

  /* Type scale — modular, anchored on body 16. */
  --t-xxxl: 160px;  /* hero display, OOH, single-number */
  --t-xxl:  96px;   /* page hero */
  --t-xl:   64px;   /* section opener */
  --t-l:    44px;   /* sub-display */
  --t-m:    28px;   /* h3 / list opener */
  --t-body-lg: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* Tracking. Display Pro Black runs heavy negative on the wordmark. */
  --tr-wordmark: -0.045em;       /* heavy neg, per §3.1 */
  --tr-display:  -0.020em;       /* per Figma (Inter substitute used -0.020em) */
  --tr-body:     0em;
  --tr-allcaps:  0.04em;          /* labels, +20 in figma terms */
  --tr-mono:     0em;

  /* Line height */
  --lh-tight:    0.92;            /* large display */
  --lh-display:  1.00;            /* most display headlines */
  --lh-sub:      1.10;            /* sub-headlines, all-caps labels */
  --lh-body:     1.40;            /* body */
  --lh-loose:    1.55;            /* long-form */

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

  /* Radii — sharp default. Rounded family = 24px. Pills = 9999px. */
  --r-sharp: 0px;
  --r-card:  24px;
  --r-pill:  9999px;

  /* Borders */
  --bd-hair: 1px solid var(--solo-soft);
  --bd-line: 1px solid var(--solo-cool);
  --bd-strong: 1px solid var(--solo-black);

  /* Motion */
  --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-reveal: 480ms;
  --dur-settle: 150ms;
}

/* ──────────────────────────────────────────────────────────
   ELEMENT DEFAULTS
   ────────────────────────────────────────────────────────── */

html, body {
  background: var(--solo-bg);
  color: var(--solo-fg);
  font-family: var(--solo-font-body);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-style: normal;            /* italics are not used in the system */
}

h1, h2, h3, h4 {
  font-family: var(--solo-font-display);
  font-weight: 900;              /* Display Pro Black */
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
}

h1 { font-size: var(--t-xxl); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); font-weight: 700; line-height: var(--lh-sub); }

p { margin: 0 0 var(--sp-4) 0; }
p:last-child { margin-bottom: 0; }

small { font-size: var(--t-small); color: var(--solo-fg-quiet); }

code, pre, .mono, .num {
  font-family: var(--solo-font-mono);
  font-weight: 400;
  font-feature-settings: "tnum";
}

/* All-caps detail labels — Text Pro Bold per §5.4 */
.label, .eyebrow {
  font-family: var(--solo-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-allcaps);
  font-size: var(--t-micro);
  line-height: var(--lh-sub);
}

/* SOLO wordmark utility — when not using the SVG */
.solo-wordmark {
  font-family: var(--solo-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tr-wordmark);
  font-feature-settings: "ss01";
  line-height: 1;
  display: inline-block;
}

/* No-italic enforcement */
em, i, cite, dfn, address, var { font-style: normal; }