/* ==========================================================================
   PowerBox brand stylesheet
   Fonts, colors (light + dark), typography, spacing, radius and a few
   ready-made pieces (buttons, cards, highlight). Link it once in <head>:
   <link rel="stylesheet" href="/css/powerbox.css">
   Paths below assume the kit's folder layout (css/ next to fonts/).
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Tokens: light (default) ---------------------------------------------- */
:root {
  /* Core palette: fixed values */
  --pb-blue-100: #E8EFFD;      /* Blue tint */
  --pb-blue-500: #4D84F0;      /* PowerBox Blue: on dark grounds */
  --pb-blue-600: #2D5FD3;      /* Deep Blue: on light grounds */
  --pb-blue-700: #234BB0;      /* Hover/pressed on light */
  --pb-blue-400: #7AA3F5;      /* Hover/pressed on dark */
  --pb-blue-900: #17233F;      /* Midnight */
  --pb-graphite-900: #111316;  /* Graphite */
  --pb-graphite-800: #1A1D22;
  --pb-graphite-700: #2A2E35;
  --pb-graphite-500: #545862;
  --pb-graphite-300: #A3A7AF;
  --pb-graphite-200: #DCDFE5;
  --pb-paper: #F5F6F8;         /* Paper */
  --pb-white: #FFFFFF;

  /* Semantic colors: use these in your pages, they switch with the theme */
  --pb-surface: var(--pb-paper);
  --pb-surface-raised: var(--pb-white);
  --pb-ink: var(--pb-graphite-900);
  --pb-ink-muted: var(--pb-graphite-500);
  --pb-line: var(--pb-graphite-200);
  --pb-brand: var(--pb-blue-600);
  --pb-brand-hover: var(--pb-blue-700);
  --pb-brand-tint: var(--pb-blue-100);
  --pb-on-brand: var(--pb-white);

  /* Type */
  --pb-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing */
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 16px;
  --pb-space-4: 24px;
  --pb-space-5: 40px;
  --pb-space-6: 64px;

  /* Radius (radius-md matches the corners of the logo box) */
  --pb-radius-sm: 6px;
  --pb-radius-md: 12px;
  --pb-radius-lg: 20px;
  --pb-radius-full: 999px;

  color-scheme: light;
}

/* ---- Tokens: dark --------------------------------------------------------- */
/* Follows the visitor's system setting unless you force a theme with
   <html data-theme="light"> or <html data-theme="dark">. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pb-surface: var(--pb-graphite-900);
    --pb-surface-raised: var(--pb-graphite-800);
    --pb-ink: var(--pb-paper);
    --pb-ink-muted: var(--pb-graphite-300);
    --pb-line: var(--pb-graphite-700);
    --pb-brand: var(--pb-blue-500);
    --pb-brand-hover: var(--pb-blue-400);
    --pb-brand-tint: var(--pb-blue-900);
    --pb-on-brand: var(--pb-graphite-900);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pb-surface: var(--pb-graphite-900);
  --pb-surface-raised: var(--pb-graphite-800);
  --pb-ink: var(--pb-paper);
  --pb-ink-muted: var(--pb-graphite-300);
  --pb-line: var(--pb-graphite-700);
  --pb-brand: var(--pb-blue-500);
  --pb-brand-hover: var(--pb-blue-400);
  --pb-brand-tint: var(--pb-blue-900);
  --pb-on-brand: var(--pb-graphite-900);
  color-scheme: dark;
}

/* ---- Base ----------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--pb-surface);
  color: var(--pb-ink);
  font-family: var(--pb-font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pb-brand); text-underline-offset: 3px; }
a:hover { color: var(--pb-brand-hover); }
::selection { background: var(--pb-brand); color: var(--pb-on-brand); }

/* ---- Typography ------------------------------------------------------------ */
.pb-display { font-family: var(--pb-font-sans); font-size: clamp(40px, 6vw, 64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.pb-title-1 { font-family: var(--pb-font-sans); font-size: clamp(32px, 4.5vw, 44px); line-height: 1.14; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.pb-title-2 { font-family: var(--pb-font-sans); font-size: clamp(26px, 3.4vw, 32px); line-height: 1.19; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pb-title-3 { font-family: var(--pb-font-sans); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.pb-lead    { font-size: 20px; line-height: 30px; font-weight: 400; color: var(--pb-ink-muted); margin: 0; }
.pb-body    { font-size: 16px; line-height: 26px; font-weight: 400; margin: 0; }
.pb-small   { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--pb-ink-muted); margin: 0; }
.pb-label   { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-brand); margin: 0; }
.pb-code, code { font-family: var(--pb-font-mono); font-size: 0.875em; font-weight: 500; background: var(--pb-brand-tint); border-radius: var(--pb-radius-sm); padding: 2px 6px; }

/* The PowerBox highlight: one key word per title, in brand blue */
.pb-highlight { color: var(--pb-brand); }

/* ---- Pieces ---------------------------------------------------------------- */
.pb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-space-2);
  min-height: 44px; padding: 0 var(--pb-space-4);
  border: 1px solid transparent; border-radius: var(--pb-radius-md);
  font-family: var(--pb-font-sans); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  background: var(--pb-brand); color: var(--pb-on-brand);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pb-button:hover { background: var(--pb-brand-hover); color: var(--pb-on-brand); }
.pb-button:focus-visible { outline: 2px solid var(--pb-brand); outline-offset: 3px; }
.pb-button--secondary { background: transparent; color: var(--pb-ink); border-color: var(--pb-line); }
.pb-button--secondary:hover { background: var(--pb-surface-raised); color: var(--pb-ink); border-color: var(--pb-ink-muted); }

.pb-card {
  background: var(--pb-surface-raised);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-md);
  padding: var(--pb-space-4);
}

.pb-container { width: min(1120px, 100% - 2 * var(--pb-space-3)); margin-inline: auto; }

/* ---- Logo helpers ------------------------------------------------------------ */
/* Put both logo files in your header; the right one shows for the theme:
   <img class="pb-logo pb-show-light" src="logos/svg/powerbox-logo-horizontal-color.svg" alt="PowerBox">
   <img class="pb-logo pb-show-dark"  src="logos/svg/powerbox-logo-horizontal-color-reverse.svg" alt="PowerBox"> */
.pb-logo { display: block; height: 36px; width: auto; }
:root .pb-show-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pb-show-light { display: none; }
  :root:not([data-theme="light"]) .pb-show-dark { display: block; }
}
:root[data-theme="dark"] .pb-show-light { display: none; }
:root[data-theme="dark"] .pb-show-dark { display: block; }