/*
 * Pareto Design Tokens
 * Single source of truth for brand colors, type stacks, and spacing scale.
 * Loaded site-wide from _Layout.cshtml so tokens are available on every page.
 *
 * Color decisions
 * ---------------
 * --pdt-forest: #1a5d2e  — canonical primary brand green, sourced from the
 *   triangle logo SVG. The prior codebase used #175f31 (slightly darker/cooler,
 *   inherited from the HTML5 UP theme). We standardize on #1a5d2e, the value
 *   from the new design system. All hardcoded #175f31 references in index.css
 *   should be migrated to var(--pdt-forest).
 *
 * Type stacks
 * -----------
 * DM Sans (geometric humanist) is the new primary sans. It is loaded here
 * via Google Fonts but only applied on pages that use var(--pdt-sans) —
 * existing site pages that reference the theme font stack are unaffected.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* --- Greens ---
       Forest is the anchor; lime/sage for accent moments only.
       --pdt-forest is the single canonical primary brand green. */
    --pdt-forest:       #1a5d2e;   /* primary CTA, links, borders, icons */
    --pdt-forest-deep:  #134422;   /* hover state for forest-colored elements */
    --pdt-green:        #2eaa48;   /* lighter in-page accent, engine card borders */
    --pdt-lime:         #74c043;   /* highlight/badge accent */
    --pdt-sage:         #b9d9a3;   /* subtle tint backgrounds */
    --pdt-mint:         #e7f0e0;   /* very light section backgrounds */

    /* --- Warm neutrals ---
       Cream paper feel — not sterile white. Preserves the premium-but-approachable tone. */
    --pdt-paper:        #faf8f3;   /* page/card background */
    --pdt-paper-deep:   #f3efe6;   /* slightly deeper card surface */
    --pdt-cream:        #ede7d8;   /* dividers, inner borders */
    --pdt-sand:         #d9cfb8;   /* stronger rule lines */

    /* --- Ink ---
       Off-black ink keeps the warm-neutral palette coherent. */
    --pdt-ink:          #1a1816;   /* primary body text */
    --pdt-ink-soft:     #3a3632;   /* secondary / supporting text */
    --pdt-mute:         #6f6a62;   /* captions, meta, placeholder text */
    --pdt-line:         #d6cfbf;   /* default border/rule color */
    --pdt-line-soft:    #e6e0d0;   /* subtle separator */

    /* --- Accent ---
       Amber is a warm counterpoint to forest green; use sparingly. */
    --pdt-amber:        #c47b3a;   /* bold call-out moments only */

    /* --- Type stacks ---
       DM Sans: geometric humanist, similar feel to Söhne / GT America.
       Source Serif 4: for pull-quotes, italic voice moments.
       JetBrains Mono: eyebrow labels, data values, code snippets. */
    --pdt-sans:  'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pdt-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --pdt-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Courier New', monospace;

    /* --- Spacing scale ---
       4 px base. Steps approximate a 1.25–1.5× progression.
       Use these instead of ad-hoc px values inside .pareto-tools components. */
    --s1:  4px;    --s2:  8px;    --s3:  12px;   --s4:  16px;
    --s5:  20px;   --s6:  24px;   --s7:  32px;   --s8:  40px;
    --s9:  56px;   --s10: 72px;   --s11: 96px;   --s12: 128px;
}