/* ---------------------------------------------------------------------------
   common.css - design tokens and primitives shared by the public site and the
   administration area.

   Everything that must look the same in both places lives here: the colour
   palette, the typographic scale, the shape of buttons and cards. The public
   stylesheet (style.css) and the admin one (admin.css) both load this file
   first and then map their own historical variable names onto these tokens,
   so a colour is changed in exactly one place.
   --------------------------------------------------------------------------- */

:root {
  /* --- Palette (light theme) --- */
  --pb-text:#1a1a1a;
  --pb-text-muted:#666;
  --pb-accent:#0066cc;
  --pb-accent-2:#5b3df5;
  --pb-border:#e2e2e2;
  --pb-surface:#fff;
  --pb-surface-alt:#f8f9fb;
  --pb-code-bg:#f5f5f5;
  --pb-bg:#fff;
  --pb-hero-1:#f0f6ff;
  --pb-hero-2:#f7f4ff;
  --pb-hero-border:#e8eefc;

  /* --- Typography --- */
  --pb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pb-font-mono:"SF Mono",Menlo,Monaco,Consolas,monospace;
  --pb-font-size:18px;
  --pb-line-height:1.65;

  /* --- Layout --- */
  --pb-width-text:720px;
  --pb-width-wide:1000px;

  /* --- Shapes --- */
  --pb-radius-sm:6px;
  --pb-radius:12px;
  --pb-radius-lg:16px;
  --pb-shadow-card:0 8px 24px rgba(0,0,0,0.08);
}

/* Dark theme: only the palette changes, every component adapts by itself.
   The attribute is set by site.js before the page is painted. */
html[data-tema="dark"] {
  --pb-text:#e4e4e7;
  --pb-text-muted:#a1a1aa;
  --pb-accent:#6ba9ff;
  --pb-accent-2:#b39dff;
  --pb-border:#2e2e35;
  --pb-surface:#18181b;
  --pb-surface-alt:#202028;
  --pb-code-bg:#1c1c20;
  --pb-bg:#101013;
  --pb-hero-1:#15203a;
  --pb-hero-2:#1d1733;
  --pb-hero-border:#2a2f45;
}

/* --- Shared primitives ---------------------------------------------------- */

* { box-sizing:border-box; }

/* Visible focus indicator for people navigating by keyboard. It matters in
   the editor as much as on the public site, so it lives here. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--pb-accent); outline-offset:2px;
}

/* The card shape used by the article cards, the homepage cards and the
   admin panels: one border radius, one border colour, one shadow. */
.pb-surface-card {
  background:var(--pb-surface);
  border:1px solid var(--pb-border);
  border-radius:var(--pb-radius);
}

/* The accent button shared by the public site and the admin forms. */
.pb-button-accent {
  background:var(--pb-accent); color:#fff; border:none;
  border-radius:var(--pb-radius-sm); padding:0.7rem 1.4rem;
  font-size:1rem; font-family:inherit; cursor:pointer;
}
.pb-button-accent:hover { filter:brightness(0.94); }

/* The quiet, secondary button (grey background, dark text). */
.pb-button-quiet {
  background:#eee; color:#333; border:none;
  border-radius:var(--pb-radius-sm); padding:0.5rem 1rem;
  font-size:0.9rem; font-family:inherit; cursor:pointer;
}