/*!
 * StopVelutinas · Design System "Ecological Sentinel"
 * 01 — Fonts (self-hosted, RGPD-friendly) + Design Tokens + Base
 */

/* ---------- Self-hosted fonts (variable woff2) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/jakarta-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/jakarta-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --sv-primary:#1B4332;          /* Deep Forest Green */
  --sv-primary-hover:#0F2D1E;
  --sv-primary-soft:#E8F1EC;
  --sv-accent:#D97706;           /* Honey Amber — CTAs, rankings, verification */
  --sv-accent-hover:#B45309;
  --sv-accent-soft:#FEF3C7;
  --sv-star:#EAB308;             /* Rating stars */
  --sv-hazard:#DC2626;           /* Safety ONLY */
  --sv-hazard-soft:#FEF2F2;

  /* Canvas & surfaces */
  --sv-canvas:#F9FAFB;
  --sv-divider:#F3F4F6;
  --sv-surface:#FFFFFF;
  --sv-border:#E5E7EB;

  /* Text */
  --sv-text:#111827;
  --sv-meta:#4B5563;

  /* Chips */
  --sv-eco-bg:#ECFDF5; --sv-eco-text:#065F46; --sv-eco-border:#A7F3D0;
  --sv-haz-bg:#FEF2F2; --sv-haz-text:#991B1B; --sv-haz-border:#FCA5A5;
  --sv-amb-bg:#FFFBEB; --sv-amb-text:#92400E; --sv-amb-border:#FCD34D;

  /* Typography */
  --sv-font-head:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sv-font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Shape */
  --sv-r-sm:.5rem;    /* tables, alerts, pros/cons */
  --sv-r-lg:1rem;     /* main containers, Top 10 cards */
  --sv-r-pill:9999px; /* chips, badges */

  /* Elevation */
  --sv-shadow:0 1px 2px 0 rgba(15,45,30,.05);
  --sv-shadow-hover:0 8px 24px -4px rgba(27,67,50,.08);
  --sv-ease:cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --sv-max:1200px;
  --sv-gap:1.5rem;
}

/* ---------- Base (global) ---------- */
body{
  font-family:var(--sv-font-body);
  color:var(--sv-text);
  background-color:var(--sv-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.entry-title,.site-title,
.wp-block-heading{
  font-family:var(--sv-font-head);
  color:var(--sv-primary);
  letter-spacing:-.01em;
}
.entry-content h1,.sv-h-xl{font-size:2.5rem;line-height:3rem;font-weight:800}
.entry-content h2,.sv-h-lg{font-size:2rem;line-height:2.5rem;font-weight:700}
.entry-content h3,.sv-h-md{font-size:1.375rem;line-height:1.75rem;font-weight:700}
.sv-body-lg{font-size:1.125rem;line-height:1.75rem}
.sv-body-md{font-size:1rem;line-height:1.5rem}
.sv-body-sm{font-size:.875rem;line-height:1.25rem}
.sv-meta{color:var(--sv-meta)}
.sv-num,table td,table th{font-variant-numeric:tabular-nums}

@media (max-width:768px){
  .entry-content h1,.sv-h-xl{font-size:2rem;line-height:2.5rem}
  .entry-content h2,.sv-h-lg{font-size:1.625rem;line-height:2.125rem}
  .entry-content h3,.sv-h-md{font-size:1.25rem;line-height:1.625rem}
}

a{color:var(--sv-primary);text-underline-offset:3px}
a:hover{color:var(--sv-primary-hover)}
:focus-visible{outline:3px solid var(--sv-accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--sv-accent-soft);color:var(--sv-text)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}