/* ═══════════════════════════════════════════════════════════════
   tokens.css — the single source for every colour, size and space
   on bhupendrasingh.com. Nothing else in the site sets a colour or
   a font size directly. Edit here, and every page changes.

   Generated values live at the bottom: the whole type scale comes
   from two numbers, --base and --scale, so the headings on every
   page stay in proportion to each other no matter what you set.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── colour / surfaces ─────────────────────────────────────── */
  --ground:#ECEFEE;        /* the page itself */
  --raise:#E3E8E6;         /* a surface lifted off the page */
  --sunk:#DCE2E0;          /* a surface pressed into it */
  --ink:#0F1513;
  --ink-70:#3E4A46;
  --ink-50:#68746F;
  --ink-30:#97A29E;
  --rule:#CBD3D0;
  --rule-soft:#DBE1DF;

  /* ── colour / projects ─────────────────────────────────────── */
  /* karta and fitlibre are sampled from the real app assets */
  --karta-deep:#14123F;
  --karta-mid:#1E2A72;
  --karta:#3780DF;
  --karta-fg:#E6ECFB;
  --karta-fg-dim:#AEBDDD;
  --karta-line:rgba(190,208,245,.22);

  --raksha-deep:#1D0B2B;
  --raksha-mid:#3A1553;
  --raksha:#E8449B;
  --raksha-core:#FFB63D;
  --raksha-fg:#F0E2F4;
  --raksha-fg-dim:#C6A8D4;

  --fit-stock:#F4EFE6;
  --fit-pale:#DFE6D6;
  --fitlibre:#589868;
  --fit-bright:#6FBF83;
  --fit-ink:#1A1D18;
  --fit-ink-dim:#5A6156;
  --fit-deep:#0F1C15;      /* the dark end of FitLibre's own range */
  --fit-deep-2:#1B3527;
  --fit-on-deep:#E4EFE5;
  --fit-on-deep-dim:#9DB6A5;

  --field-ground:#0C1020;

  /* ── colour / states ───────────────────────────────────────── */
  /* semantic, and never borrowed from the project colours above:
     a blue chip must read as "being built", not as "this is Karta" */
  --s-building:#2F6FD0;
  --s-thinking:#5E6B75;
  --s-shipped:#4E8A5E;
  --s-parked:#8C7F71;

  /* ── type ──────────────────────────────────────────────────── */
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --base:16;               /* body size in px, unitless */
  --scale:1.28;            /* ratio between every step */
  --disp-wdth:118;         /* Archivo width axis, display */
  --disp-wght:760;         /* Archivo weight axis, display */
  --body-lh:1.55;

  /* ── space ─────────────────────────────────────────────────── */
  --rhythm:1rem;           /* the unit everything inside a block uses */
  --step:6rem;             /* between sections */
  --measure:78rem;         /* wide container, for the home page */
  --measure-read:56rem;    /* narrow container, for pages that are read */
  --gutter:1.25rem;

  /* ── shape ─────────────────────────────────────────────────── */
  --radius:2px;
  --hair:1px;

  /* ── derived — never set a size by hand ────────────────────── */
  --t0:calc(var(--base) * 1px);
  --t1:calc(var(--t0) * var(--scale));
  --t2:calc(var(--t1) * var(--scale));
  --t3:calc(var(--t2) * var(--scale));
  --t4:calc(var(--t3) * var(--scale));
  --t5:calc(var(--t4) * var(--scale));
  --t6:calc(var(--t5) * var(--scale));
  --t7:calc(var(--t6) * var(--scale));
  --tm:calc(var(--t0) / var(--scale));

  /* responsive display sizes, still anchored to the scale */
  --d-hero:clamp(2.35rem, 5.6vw, var(--t7));
  --d-name:clamp(2.4rem, 5vw, var(--t6));
  --d-stmt:clamp(1.9rem, 4.2vw, var(--t5));
  --d-head:clamp(1.9rem, 4vw, var(--t4));
}