/* DaBro Editorial v2 — Design Tokens
 * Extracted from Claude Design bundle (2026-04-17)
 * Source: projects/content-factory-saas/site/article-template-v2.html
 *
 * Contains: :root CSS custom properties (color, typography, spacing,
 * radii, borders, shadows, motion) + semantic element styles
 * (html, body, h1-h4, p, a, mark, blockquote, ul/ol, code, hr, ::selection).
 */

/* =========================================================================
   DaBro Editorial Design System — Tokens
   ------------------------------------------------------------------------
   Adaptation from dabro.pro landing DNA → long-read editorial register.
   Landings: dark + neon. Articles: light paper + neon as *punctuation*.
   ========================================================================= */

/* ---- FONTS ------------------------------------------------------------- */
/* Space Grotesk + JetBrains Mono load via shell.html (Google Fonts CDN,
   or self-hosted fonts.css). Local @font-face set removed 2026-07-02:
   relative uuid src resolved against /assets/dabro/ -> 404 on every article. */


:root {

  /* =====================================================================
     COLOR TOKENS
     ===================================================================== */

  /* -- Brand core (from dabro.pro landings) ----------------------------- */
  --dabro-green:   #06f806;   /* signal / primary accent */
  --dabro-violet:  #bb06f8;   /* secondary accent — brand electric violet (НЕ #8b5cf6) */
  --dabro-blue:    #bb06f8;   /* legacy alias → brand violet; sky #38bdf8 не бренд (02.07) */
  --dabro-ink:     #0a0a0a;   /* deeper than landing #1a1a1a — editorial gravitas */

  /* Brand gradient — used VERY sparingly in editorial (CTA, hero accents) */
  --dabro-gradient: linear-gradient(135deg, #06f806 0%, #bb06f8 100%);

  /* -- Paper / surfaces (light editorial) ------------------------------- */
  --paper:         #fbfaf5;   /* primary page background — warm off-white, easier than pure white */
  --paper-2:       #f2f1ea;   /* callout backgrounds, TOC, card fills */
  --paper-3:       #e6e4d7;   /* dividers, table headers */
  --paper-edge:    #d9d6c4;   /* subtle borders */

  /* -- Inverse / dark surfaces (hero, CTA, full-bleed breaks) ----------- */
  --ink:           #0a0a0a;
  --ink-2:         #171717;
  --ink-3:         #222222;
  --ink-edge:      #2e2e2e;

  /* -- Text ------------------------------------------------------------- */
  --fg-1:          #0a0a0a;   /* primary body on paper */
  --fg-2:          #3d3d38;   /* secondary — captions, meta */
  --fg-3:          #6b6b63;   /* muted — sources, footnotes */
  --fg-on-ink-1:   #fbfaf5;   /* primary on dark surfaces */
  --fg-on-ink-2:   #b5b5a8;   /* secondary on dark surfaces */

  /* -- Semantic accents (editorial use) --------------------------------- */
  --link:          #059405;   /* darker green — passes WCAG AA on paper */
  --link-hover:    #047104;
  --highlight-bg:  #c9ff5f;   /* lighter green for text highlights (<mark>) */
  --highlight-fg:  #0a0a0a;

  --accent-green:  #06f806;   /* raw neon — use on DARK or as thin bar/rule */
  --accent-violet: #bb06f8;   /* brand electric violet */
  --accent-violet-ink: #8a04b8;  /* accessible dark brand violet on paper */

  --quote-bar:     #06f806;   /* left-bar color for pull quotes */
  --rule:          #0a0a0a;   /* hairline rules — ink, 1px */

  /* -- Callout kinds ---------------------------------------------------- */
  --callout-info-bg:    #f2f1ea;   /* neutral paper — sky-blue info убран (бренд 02.07) */
  --callout-info-edge:  #0a0a0a;
  --callout-tip-bg:     #e8fff0;
  --callout-tip-edge:   #06f806;
  --callout-warn-bg:    #fff4e0;
  --callout-warn-edge:  #f59e0b;
  --callout-myth-bg:    #f8ecfe;   /* "миф-разоблачение" — signature DaBro move */
  --callout-myth-edge:  #bb06f8;

  /* =====================================================================
     TYPOGRAPHY TOKENS
     ===================================================================== */

  --font-sans:     'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
                   'Liberation Mono', monospace;

  /* Fluid type scale — 320px → 1280px viewport
     Read distance: long-read is ~18–20px at comfortable desktop. */
  --fs-eyebrow:    clamp(0.75rem, 0.70rem + 0.20vw, 0.80rem);   /* 12→13 */
  --fs-meta:       clamp(0.80rem, 0.75rem + 0.20vw, 0.90rem);   /* 13→14 */
  --fs-caption:    clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);   /* 14→15 */
  --fs-body:       clamp(1.0625rem, 1.00rem + 0.35vw, 1.1875rem); /* 17→19 */
  --fs-body-lg:    clamp(1.15rem, 1.05rem + 0.45vw, 1.3125rem);   /* 18→21 — lede */
  --fs-pullquote:  clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);        /* 24→34 */
  --fs-h3:         clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);      /* 20→24 */
  --fs-h2:         clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);      /* 28→44 */
  --fs-h1:         clamp(2.5rem, 1.9rem + 3.0vw, 4.5rem);         /* 40→72 */
  --fs-hero:       clamp(3rem, 2.0rem + 5.5vw, 6.5rem);           /* 48→104 — inverse hero */

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-body:       1.6;
  --lh-relaxed:    1.75;

  --tracking-tight: -0.02em;   /* big display */
  --tracking-body:  -0.005em;
  --tracking-caps:  0.06em;    /* eyebrows, tags */

  /* =====================================================================
     SPACING / RHYTHM
     ===================================================================== */

  --space-0: 0;
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Vertical rhythm between article blocks */
  --flow-paragraph: 1.1em;     /* between <p> */
  --flow-block:    var(--space-6);   /* between blocks (list, quote, img) */
  --flow-h2:       var(--space-8);   /* before an <h2> */
  --flow-h3:       var(--space-6);   /* before an <h3> */

  /* Article content width — optimal 60–75ch for long-read */
  --w-text:   68ch;          /* body column */
  --w-wide:   84ch;          /* images / pull-quotes bleed slightly */
  --w-full:   100%;          /* full-bleed */
  --w-page:   1280px;        /* max layout width incl. margins */
  --w-toc:    240px;         /* sticky sidebar width */

  /* =====================================================================
     RADII / BORDERS / SHADOWS
     ===================================================================== */

  --radius-0: 0;
  --radius-1: 2px;    /* sharp editorial — avoid over-rounding */
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  --border-hair:   1px solid var(--paper-edge);
  --border-rule:   1px solid var(--rule);
  --border-heavy:  2px solid var(--rule);
  --border-accent: 3px solid var(--accent-green);

  /* Editorial prefers flat; shadows reserved for floating UI only */
  --shadow-card:    0 1px 0 var(--paper-edge);
  --shadow-float:   0 8px 24px -12px rgba(10,10,10,0.18);
  --shadow-cta:     0 0 0 2px var(--ink), 4px 4px 0 0 var(--ink); /* hard-offset, brutalist */
  --shadow-cta-hover: 0 0 0 2px var(--ink), 2px 2px 0 0 var(--ink);

  /* =====================================================================
     MOTION
     ===================================================================== */

  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.1, 1);
  --t-fast:    120ms;
  --t-med:     220ms;
  --t-slow:    420ms;
}

/* =========================================================================
   SEMANTIC STYLES — drop-in tags for editorial long-read
   ========================================================================= */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--paper); }
body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tracking-body);
       font-feature-settings: 'ss01', 'ss02', 'cv11'; text-rendering: optimizeLegibility;
       -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--space-5); }
h2 { font-size: var(--fs-h2); margin: var(--flow-h2) 0 var(--space-4); }
h3 { font-size: var(--fs-h3); margin: var(--flow-h3) 0 var(--space-3); font-weight: 600; }

p  { margin: 0 0 var(--flow-paragraph); text-wrap: pretty; max-width: var(--w-text); }

a  { color: var(--link); text-decoration: underline;
     text-decoration-thickness: 1.5px; text-underline-offset: 3px;
     transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--link-hover); background: var(--highlight-bg); }

mark { background: var(--highlight-bg); color: var(--highlight-fg); padding: 0 0.15em; border-radius: 1px; }

small, .caption { font-size: var(--fs-caption); color: var(--fg-2); }

.eyebrow {
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-weight: 600; color: var(--fg-2);
}

blockquote {
  margin: var(--flow-block) 0; padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--accent-green);
  font-size: var(--fs-pullquote); line-height: 1.25; font-weight: 500;
  letter-spacing: var(--tracking-tight); max-width: var(--w-wide);
}
blockquote cite { display: block; margin-top: var(--space-3);
  font-size: var(--fs-caption); font-style: normal; font-weight: 400; color: var(--fg-2); }

ul, ol { max-width: var(--w-text); margin: 0 0 var(--flow-paragraph); padding-left: 1.5em; }
li { margin-bottom: 0.4em; }
ul li::marker { color: var(--accent-green); }
ol li::marker { color: var(--fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Inline code — use inside running prose */
code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  padding: 0.1em 0.35em; border-radius: var(--radius-2);
  color: var(--fg-1);
}

/* Block code — <pre><code>…</code></pre> */
pre {
  font-family: var(--font-mono); font-size: 0.88em; line-height: 1.55;
  background: var(--ink); color: var(--fg-on-ink-1);
  padding: 20px 22px; border-radius: var(--radius-3);
  margin: var(--flow-block) 0; max-width: var(--w-wide);
  overflow-x: auto; tab-size: 2;
  border-left: 3px solid var(--accent-green);
}
pre code {
  background: transparent; border: 0; padding: 0; color: inherit;
  font-size: inherit;
}
/* Dim comments if user marks them with <span class="c"> */
pre .c { color: var(--fg-on-ink-2); font-style: italic; }
pre .k { color: var(--accent-green); }    /* keyword */
pre .s { color: #ffd07a; }                 /* string */
pre .n { color: var(--dabro-blue); }       /* number */

hr {
  border: 0; height: 1px; background: var(--rule);
  margin: var(--space-8) 0; max-width: var(--w-wide);
}

::selection { background: var(--accent-green); color: var(--ink); }