/* ============================================================
   SunEnergyXT — Design Tokens
   Drop this file at the top of any artifact. All other styles
   reference these custom properties.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------- Color: Ink (dark surfaces) -------- */
  --ink-900: #0a0a0b;
  --ink-800: #121316;
  --ink-700: #1b1d22;
  --ink-600: #2a2d34;
  --ink-500: #4a4e57;
  --ink-300: #8b8f99;
  --ink-200: #b8bbc2;
  --ink-100: #e6e7ea;

  /* -------- Color: Paper (light surfaces) -------- */
  --paper: #ffffff;
  --paper-muted: #f4f4f2;
  --paper-line: #e3e3df;

  /* -------- Color: Brand Gold -------- */
  --gold-700: #8a6315;
  --gold-600: #b8861e;
  --gold-500: #f7c767;
  --gold-400: #f4c45a;
  --gold-300: #f8d889;

  /* -------- Color: Status / Accent -------- */
  --led-cyan: #7bd3f7;
  --positive: #5bc48a;
  --warn: #e8b341;
  --negative: #e25b4d;

  /* -------- Semantic mappings (dark, default) -------- */
  --bg: var(--ink-900);
  --bg-elev: var(--ink-800);
  --bg-inset: var(--ink-700);
  --border: var(--ink-600);
  --text: var(--ink-100);
  --text-muted: var(--ink-300);
  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-pressed: var(--gold-600);

  /* -------- Type scale -------- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-display-xl: 4.5rem;     /* 72 */
  --text-display-l:  3.25rem;    /* 52 */
  --text-display-m:  2.25rem;    /* 36 */
  --text-h1:         1.625rem;   /* 26 */
  --text-h2:         1.25rem;    /* 20 */
  --text-body:       1rem;       /* 16 */
  --text-small:      0.875rem;   /* 14 */
  --text-micro:      0.75rem;    /* 12 */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-caps:   0.12em;

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

  /* -------- Radii -------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* -------- Shadows -------- */
  --shadow-card: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
  --shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-gold: 0 0 0 1px rgba(232, 179, 65, 0.25),
    0 8px 32px -8px rgba(232, 179, 65, 0.4);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 480ms;

  /* -------- Layout -------- */
  --container-max: 1280px;
  --gutter: var(--s-5);
}

/* Light mode — invert semantic mappings, keep gold */
[data-theme="light"] {
  --bg: var(--paper);
  --bg-elev: var(--paper-muted);
  --bg-inset: var(--paper);
  --border: var(--paper-line);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
}

/* ----- Base ----- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Type primitives ----- */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  font-weight: 500;
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.t-display-m {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
.t-h1 { font-size: var(--text-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; }
.t-h2 { font-size: var(--text-h2); font-weight: 600; line-height: var(--lh-snug); }
.t-body { font-size: var(--text-body); font-weight: 400; line-height: var(--lh-relaxed); color: var(--text-muted); }
.t-small { font-size: var(--text-small); }
.t-micro { font-size: var(--text-micro); }
.t-mono  { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ----- Layout primitives ----- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}