/* --- web fonts ---
   Fira Sans is loaded via a separate <link rel="stylesheet"> in
   _header.twig so it parallel-loads with this file instead of chaining
   off an @import. Same goes for the Fira Sans / TT Trailers woff2 files
   preloaded in _header.twig. */
@font-face {
  font-family: 'TT Trailers';
  src: url('../fonts/tt-trailers/TT_Trailers2_DemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- modern reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, picture, video, svg { max-width: 100%; display: block; }
video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- tokens --- */
:root {
  --font-sans: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "TT Trailers", "Fira Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --color-bg:           #ffffff;
  --color-bg-soft:      #f1f2f3;
  --color-fg:           #0c0d0e;
  --color-fg-strong:    #000000;  /* true black — grid card titles */
  --color-fg-prose:     #3a4145;  /* body text in prose / quotes */
  --color-muted:        #67737b;
  --color-rule:         #d5d9dc;
  --color-rule-soft:    #e2e8f0;  /* hover bg on tag chips */
  --color-accent:       #651cfc;
  --color-accent-2:     #4c03e3;
  --color-chip-bg:      #eee6ff;
  --color-chip-fg:      #3b02b0;

  /* Dark surfaces (related-posts band, featured backdrop, code blocks) */
  --color-surface-dark: #0c0d0e;
  --color-code-bg:      #0f172a;
  --color-code-fg:      #e2e8f0;
  --color-on-dark:      #ffffff;
  --color-on-dark-soft: #f1f2f3;

  /* Branded gradient stops for the callouts backdrop fallback */
  --grad-callouts-1:    #efe7ff;
  --grad-callouts-2:    #f4ecff;
  --grad-callouts-3:    #e8edff;

  /* Common shadow tints — use as base for box-shadow declarations */
  --shadow-tint:        rgba(0, 0, 0, 0.08);
  --shadow-tint-hover:  rgba(0, 0, 0, 0.14);

  /* font-size scale — matches updates.dplugins.com */
  --fs-xxs:   clamp(14px, 14px + 0vi, 14px);
  --fs-xs:    clamp(16px, 15px + 0.25vi, 18px);
  --fs-sm:    clamp(18px, 16.5px + 0.38vi, 21px);
  --fs-base:  clamp(20px, 18px + 0.5vi, 24px);
  --fs-md:    clamp(28px, 22px + 1.5vi, 40px);
  --fs-lg:    clamp(36px, 30px + 1.5vi, 48px);
  --fs-giga:  clamp(45px, 32.5px + 3.13vi, 70px);
  --fs-title: clamp(60px, 35px + 6.25vi, 110px);
  --fs-mega:  clamp(70px, 30px + 10vi, 150px);

  /* spacing scale — fluid, scales with viewport */
  --sp-xs:    clamp(4px,  3px  + 0.25vi, 6px);
  --sp-sm:    clamp(8px,  6px  + 0.5vi,  12px);
  --sp-base:  clamp(16px, 12px + 1vi,    24px);
  --sp-md:    clamp(20px, 14px + 1.5vi,  32px);
  --sp-lg:    clamp(28px, 20px + 2vi,    48px);
  --sp-giga:  clamp(36px, 24px + 3vi,    60px);
  --sp-mega:  clamp(48px, 32px + 4.5vi,  90px);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-card:  6px 6px 9px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-hover: 8px 12px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);

  --max-w-page:    1920px;
  --max-w:         1440px;
  --max-w-content: 1100px;
  --max-w-prose:   900px;
}