/* Product Hub Блог — design tokens.
   Light is the default. Dark applies when <html data-theme="dark">, or when the
   reader's device prefers dark and no theme was chosen (no data-theme attribute).
   js/theme.js sets data-theme from the reader's choice. */

:root {
  /* Colour — light */
  --bg: #fafafa;            /* page ground */
  --surface: #ffffff;       /* cards, panels */
  --subtle: #f6f8fb;        /* quiet fills: «Внутри», screenshot placeholder, icon tiles */
  --ink: #0b0b0c;           /* headings, strong text */
  --ink-2: #4b4f58;         /* paragraphs */
  --ink-3: #6b7484;         /* captions, meta, inactive tabs */
  --muted: #8a8f99;         /* icons and arrows only — never text */
  --faint: #d9dbe0;         /* decorative numerals only */
  --line: #e6e7ea;          /* borders, dividers */
  --line-strong: #c9ccd3;   /* hover border, ghost button border */
  --accent: #3772e4;        /* Product Hub blue: marks, active tab, progress, focus */
  --accent-deep: #2456b8;   /* blue for text: links, badges, CTAs */
  --accent-soft: #eaf0fc;   /* tool card ground, guide badge, insight callout */
  --accent-tint: #d6e2fa;   /* tool card border */
  --solid: #2456b8;         /* solid badge fill («Инструмент») */
  --btn-bg: #0b0b0c;        /* primary button fill */
  --on-solid: #ffffff;      /* text on --solid and --btn-bg */
  --shadow-float: 0 8px 24px rgba(11, 11, 12, 0.12); /* only things floating over content */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Space (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 88px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 680px;          /* running text */
  --container: 1120px;       /* feed width */
  --tap: 44px;               /* minimum tap target */

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-pill: 999px;

  /* Motion */
  --motion-press: 100ms;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-reveal: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-shift: 8px;

  color-scheme: light;
}

/* Colour — dark (chosen) */
:root[data-theme="dark"] {
  --bg: #0f1012;
  --surface: #17181b;
  --subtle: #1e2024;
  --ink: #f2f3f5;
  --ink-2: #c2c6ce;
  --ink-3: #9aa1ad;
  --muted: #7a818d;
  --faint: #3a3d44;
  --line: #2a2c31;
  --line-strong: #42454d;
  --accent: #5b8ff0;
  --accent-deep: #93b4f7;
  --accent-soft: #172238;
  --accent-tint: #24365c;
  --solid: #93b4f7;
  --btn-bg: #f2f3f5;
  --on-solid: #0f1012;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Colour — dark (device preference, nothing chosen yet) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1012;
    --surface: #17181b;
    --subtle: #1e2024;
    --ink: #f2f3f5;
    --ink-2: #c2c6ce;
    --ink-3: #9aa1ad;
    --muted: #7a818d;
    --faint: #3a3d44;
    --line: #2a2c31;
    --line-strong: #42454d;
    --accent: #5b8ff0;
    --accent-deep: #93b4f7;
    --accent-soft: #172238;
    --accent-tint: #24365c;
    --solid: #93b4f7;
    --btn-bg: #f2f3f5;
    --on-solid: #0f1012;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

@media (min-width: 900px) { :root { --reveal-shift: 12px; } }