/* =========================================================
   JAGROOK — Design tokens
   Source: Figma "Final jagrook website" (sampled 28 Sep 2026).
   Values marked (≈) are sampled from exports — verify against
   Figma variables once full access is restored.
   Contrast notes: see JAGROOK_REQUIREMENTS.md §5 D10/D11.
   ========================================================= */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-bold.woff") format("woff"); }
/* CHALK FONT: drop the Figma chalk font file into assets/fonts and update src below */
/* @font-face { font-family: "JG Chalk"; font-weight: 400; font-display: swap; src: url("../fonts/chalk.woff2") format("woff2"); } */

:root {
  /* Brand colours */
  --jg-primary: #005EAC;          /* headings, links, banners — 6.57:1 on white */
  --jg-primary-dark: #004A88;
  --jg-primary-tint: #E6F0F8;
  --jg-navy: #0B2A78;             /* (≈) utility bar, secondary button */
  --jg-accent: #F15A29;           /* decorative only: fills, borders, icons (3.37:1) */
  --jg-accent-strong: #C8410F;    /* orange with white text — 4.98:1 (D10 fix) */
  --jg-accent-text: #B03A0B;      /* orange text on white / tint */
  --jg-accent-tint: #FDEBE4;      /* (≈) progress panel, popular-blog cards */
  --jg-promo: #3866E3;            /* Saarthi banner — 5.03:1 with white */
  --jg-success: #1F7A3D;
  --jg-error: #B42318;
  --jg-chalk-bg: #2A2724;         /* (≈) */
  --jg-chalk-frame: #6B4A2B;      /* (≈) */

  /* Neutrals */
  --jg-text: #151515;
  --jg-text-muted: #595959;       /* ≥ 7:1 — D11 fix */
  --jg-text-subtle: #6B6B6B;      /* 5.33:1 — minimum for meta text */
  --jg-border: #DADADA;
  --jg-border-strong: #8A8A8A;    /* form field borders — 3:1 non-text */
  --jg-surface: #FFFFFF;
  --jg-surface-alt: #F6F7F9;
  --jg-disabled-bg: #D9D9D9;

  /* Typography */
  --jg-font: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --jg-font-chalk: "JG Chalk", "Cabin Sketch", "Chalkboard SE", "Comic Sans MS", cursive;
  --jg-fs-xs: 0.75rem;   /* 12 */
  --jg-fs-sm: 0.875rem;  /* 14 */
  --jg-fs-md: 1rem;      /* 16 */
  --jg-fs-lg: 1.125rem;  /* 18 */
  --jg-fs-xl: 1.5rem;    /* 24 */
  --jg-fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); /* 28–36 */
  --jg-fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);       /* 32–48 */
  --jg-lh-tight: 1.2;
  --jg-lh: 1.6;

  /* Spacing (4px scale) */
  --jg-s1: 4px; --jg-s2: 8px; --jg-s3: 12px; --jg-s4: 16px; --jg-s5: 24px;
  --jg-s6: 32px; --jg-s7: 48px; --jg-s8: 64px; --jg-s9: 96px;

  /* Layout */
  --jg-container: 1216px;
  --jg-gutter: 16px;
  --jg-measure: 70ch;

  /* Shape & depth */
  --jg-radius-sm: 4px;
  --jg-radius: 8px;
  --jg-radius-lg: 16px;
  --jg-radius-xl: 24px;
  --jg-radius-pill: 999px;
  --jg-shadow: 0 2px 8px rgba(16, 24, 40, .08);
  --jg-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);

  /* Focus */
  --jg-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px #0B2A78;

  /* Text scaling (C01 text-size control sets this) */
  --jg-text-scale: 1;
}

@media (min-width: 768px) { :root { --jg-gutter: 24px; } }
@media (min-width: 1280px) { :root { --jg-gutter: 32px; } }