/* ============================================================
   Cefic brand tokens for the EU27 chemicals trade radar
   Aligned with Cefic Visual Identity Guidelines (April 2021).
   Digital typography: Noto Serif (titles) + Lato (UI/body).
   Canonical orange: #F47B20 (Pantone 166 C).
   Source: /home/jme/iris/site/src/styles/cefic-tokens.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300..900;1,300..900&family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Typography ---------- */
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* alias used by legacy styles */
  --font:       var(--font-sans);

  /* ---------- Cefic primary palette (p.11) ---------- */
  --cefic-orange:         #F47B20;
  --cefic-orange-700:     #c65d18;
  --cefic-orange-900:     #a84e0e;
  --cefic-orange-500:     #F79144;
  --cefic-orange-300:     #F9A86D;
  --cefic-orange-100:     #fce6cf;

  /* Aliases for the legacy stylesheet */
  --cefic-primary:        var(--cefic-orange);
  --cefic-primary-dark:   var(--cefic-orange-700);
  --cefic-primary-darker: var(--cefic-orange-900);
  --cefic-primary-light:  var(--cefic-orange-500);
  --cefic-primary-lighter:var(--cefic-orange-300);

  /* ---------- Cefic accent blues (p.12) ---------- */
  --cefic-blue-1: #005CAB;  /* primary blue – used for imports series */
  --cefic-blue-2: #007DC3;
  --cefic-blue-3: #13B5EA;
  --cefic-blue-4: #0096D6;
  --cefic-blue-5: #0076C0;
  --cefic-blue-6: #008BB0;

  /* ---------- Cefic accent greens (p.12) ---------- */
  --cefic-green-1: #00A99E;
  --cefic-green-2: #A5D290;
  --cefic-green-3: #92C039;
  --cefic-green-4: #79B777;
  --cefic-green-5: #59A18C;
  --cefic-green-6: #5BBAA5;

  /* Single-name green for legacy .pos classes */
  --cefic-green: var(--cefic-green-1);

  /* ---------- Digital gradients (p.49) ---------- */
  --grad-light-blue: linear-gradient(135deg, #20b1d6 0%, #006088 100%);
  --grad-green:      linear-gradient(135deg, #31aeb7 0%, #008763 100%);
  --grad-orange:     linear-gradient(135deg, #ff8876 0%, #ffae46 100%);
  --grad-dark-blue:  linear-gradient(135deg, #007dc2 0%, #005cab 100%);
  --grad-hero:       linear-gradient(135deg, #005CAB 0%, #007DC3 45%, #00A99E 100%);

  /* ---------- Hex texture SVG (Cefic graphical signature) ---------- */
  --hex-pattern-soft:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'><polygon points='60,4 110,32 110,92 60,120 10,92 10,32'/></svg>");
  --hex-pattern-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1.5'><polygon points='60,4 110,32 110,92 60,120 10,92 10,32'/></svg>");
  --hex-pattern-vivid:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'><polygon points='60,4 110,32 110,92 60,120 10,92 10,32'/></svg>");

  /* ---------- Accent RGB (so rgba() works with tokens) ---------- */
  --cefic-orange-rgb: 244, 123, 32;
}

/* Dark mode overrides: keep token semantics, shift neutral shades only */
html[data-theme="dark"]:root,
html[data-theme="dark"] {
  --cefic-orange-100: rgba(244, 123, 32, 0.18);
}