/* ==========================================================================
   GET KANDID — DESIGN TOKENS  ·  get-kandid.com  ·  v2.0
   --------------------------------------------------------------------------
   Single source of truth. Every colour, type step, space, radius and shadow
   used across the product lives here as a CSS custom property.
   Ports 1:1 to a theme object in the Node.js / React app.

   Naming:  --gk-<group>-<role/step>
   Groups:  ink (navy)  ·  blue (action)  ·  neutral  ·  sentiment
            type  ·  space  ·  radius  ·  shadow  ·  layout
   ========================================================================== */

:root {

  /* --- INK · the trust anchor (navy → near-black) ----------------------- */
  --gk-ink-900: #13213C;   /* deepest — dark bands, footer, report cover    */
  --gk-ink-800: #1F3864;   /* brand dark — primary headings                 */
  --gk-ink-700: #2C4E84;
  --gk-ink-600: #3C5F97;

  /* --- KANDID BLUE · the action colour --------------------------------- */
  --gk-blue-700: #225D96;  /* hover / pressed                               */
  --gk-blue-600: #2E75B6;  /* PRIMARY — buttons, links, data accents        */
  --gk-blue-500: #4C8DC9;
  --gk-blue-100: #D8E8F6;  /* fills, chart bands                            */
  --gk-blue-50:  #EDF4FB;  /* tint surfaces, table highlight rows           */

  /* --- NEUTRALS · warm paper ------------------------------------------- */
  --gk-paper:     #FBFAF8; /* page background — warm off-white              */
  --gk-surface:   #FFFFFF; /* cards, the report "paper"                     */
  --gk-surface-2: #F4F3EF; /* alt surface, code, inset panels               */
  --gk-text:      #20211F; /* primary text — warm near-black                */
  --gk-text-2:    #5B5B55; /* secondary text — warm grey (brand #595959)    */
  --gk-text-3:    #8A8A82; /* muted, captions, axis labels                  */
  --gk-border:    #E7E4DD; /* hairline                                      */
  --gk-border-2:  #D5D1C7; /* stronger divider                             */

  /* --- SENTIMENT · refined trio (fill · tint bg · ink text) ------------ */
  --gk-pos:     #C3DCAC;   --gk-pos-bg: #ECF3E4;   --gk-pos-ink: #4E7A2B;
  --gk-neu:     #F1D079;   --gk-neu-bg: #FAF2D6;   --gk-neu-ink: #97700A;
  --gk-neg:     #ECACA3;   --gk-neg-bg: #FAE9E5;   --gk-neg-ink: #B23A2D;

  /* --- TYPEFACES ------------------------------------------------------- */
  --gk-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --gk-font-sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", system-ui, Arial, sans-serif;
  --gk-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                     Consolas, monospace;

  /* --- TYPE SCALE (16px base) ------------------------------------------ */
  --gk-fs-display: clamp(2.6rem, 1.6rem + 3.6vw, 3.6rem); /* hero serif    */
  --gk-fs-h1:      2rem;       /* 32 */
  --gk-fs-h2:      1.5rem;     /* 24 */
  --gk-fs-h3:      1.25rem;    /* 20 */
  --gk-fs-h4:      1.0625rem;  /* 17 */
  --gk-fs-lg:      1.0625rem;  /* 17 — lead paragraphs */
  --gk-fs-base:    0.9375rem;  /* 15 — body            */
  --gk-fs-sm:      0.8125rem;  /* 13 — captions, table */
  --gk-fs-xs:      0.6875rem;  /* 11 — eyebrows, chips  */

  --gk-lh-tight:  1.1;
  --gk-lh-snug:   1.32;
  --gk-lh-normal: 1.6;

  --gk-tracking-eyebrow: 0.16em;
  --gk-tracking-tight:  -0.02em;

  /* --- SPACE · 4pt grid ------------------------------------------------ */
  --gk-s-1: 4px;   --gk-s-2: 8px;   --gk-s-3: 12px;  --gk-s-4: 16px;
  --gk-s-5: 24px;  --gk-s-6: 32px;  --gk-s-7: 48px;  --gk-s-8: 64px;
  --gk-s-9: 96px;

  /* --- RADIUS ---------------------------------------------------------- */
  --gk-radius-sm:   6px;
  --gk-radius:      8px;    /* brand */
  --gk-radius-lg:   14px;
  --gk-radius-pill: 999px;

  /* --- SHADOW · navy-tinted, soft -------------------------------------- */
  --gk-shadow-sm: 0 1px 2px rgba(19,33,60,.06), 0 1px 1px rgba(19,33,60,.04);
  --gk-shadow:    0 2px 10px rgba(19,33,60,.07), 0 1px 3px rgba(19,33,60,.05);
  --gk-shadow-lg: 0 20px 50px rgba(19,33,60,.16);

  /* --- LAYOUT ---------------------------------------------------------- */
  --gk-wrap: 1120px;   /* marketing max width   */
  --gk-doc:  960px;    /* report document width */
  --gk-focus-ring: 0 0 0 3px rgba(46,117,182,.30);
}