/* gautham.co design tokens: the one source for colour, type, shape and motion.
   Every page loads this first. Motion follows transitions.dev: one ease-out, one spring, four durations;
   exits are quicker than entrances; things rise a little and come out of a soft blur. */
:root{
  /* colour */
  --ink:#111; --grey:#6F6F6F; --grey-2:#8A8A8A; --grey-3:#BDBDBA;
  --line:#E7E7E5; --fill:#F4F4F3; --fill-2:#ECECEA; --fill-3:#E2E2DF; --paper:#fff;
  --accent:#C8F25C;
  /* the drawing set: four flat colours for the paint brush on the homepage */
  --mark-1:#FF5A1F; --mark-2:#2F4BFF; --mark-3:#111111; --mark-4:#F4A6C8;
  /* feedback: one muted red for errors, used sparingly, never as a fill behind text */
  /* text and surfaces beyond the basics: everything on the site maps onto these */
  --ink-2:#333; --ink-hover:#2A2A2A; --on-ink:#fff; --line-2:#DADAD7; --paper-2:#FAFAF9; --amber:#E0A040;
  /* message icons, used by every error and confirmation */
  --ico-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0Zm0 9.4a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8ZM7 3a.8.8 0 0 0-.8.8v3.6a.8.8 0 0 0 1.6 0V3.8A.8.8 0 0 0 7 3Z'/%3E%3C/svg%3E");
  --ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0Zm3.1 4.4a.8.8 0 0 0-1.1.1L6.2 7.9 5 6.7a.8.8 0 1 0-1.1 1.1l1.8 1.8a.8.8 0 0 0 1.2-.1l3.3-4a.8.8 0 0 0-.1-1.1Z'/%3E%3C/svg%3E");
  --ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0Zm0 6a.8.8 0 0 0-.8.8v3.4a.8.8 0 0 0 1.6 0V6.8A.8.8 0 0 0 7 6Zm0-3a.9.9 0 1 0 0 1.8A.9.9 0 0 0 7 3Z'/%3E%3C/svg%3E");
  /* the homepage sky: a blue that deepens toward the bottom of the page */
  --sky-1:#4F78FF; --sky-2:#8FB1FF; --sky-3:#6DB8FF; --sky-4:#A9B8FF; --sky-5:#E4ECFF;
  --cobalt:#2D4FE0;   /* the ASCII blue: cursor tag, email header, budget folder */
  /* people: one colour each for live cursors and who's online (presence Worker uses the same list) */
  --pc-1:#2D4FE0; --pc-2:#3F9A6B; --pc-3:#FF5A1F; --pc-4:#F4A6C8; --pc-5:#111111; --pc-6:#E0A040;
  --live:#3F9A6B; --live-ring:rgba(63,154,107,.16);   /* new / live dots: a muted green that sits with the warm greys */
  --danger:#C2412D; --danger-ring:rgba(194,65,45,.14); --danger-fill:#FBEFEC; --danger-line:rgba(194,65,45,.18);
  --ok:#2E7D4F; --ok-fill:#EEF6F0; --ok-line:rgba(46,125,79,.18);

  /* type: Inter Tight only */
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --mono:var(--sans);
  /* type scale: six steps, everything snaps to these */
  --fs-caption:12px; --fs-body:15px; --fs-lead:19px; --fs-display:clamp(40px,4.6vw,72px);
  --fs-small:var(--fs-body);   /* folded into body: secondary text is set apart by grey, not by size */
  /* the one title size: section statements, idea lines, imagery lines */
  --title-size:clamp(22px,2.2vw,34px);  /* title */ --title-lh:1.16; --title-ls:-.022em; --title-w:500; --title-measure:32ch; /* one typeface everywhere: Inter Tight. Labels and numbers use tabular figures, not a mono font */
  /* page headlines: one size on every page. intro: the opening line of a page; chapter: the huge numbered section names */
  --intro-size:clamp(28px,3.3vw,52px); --intro-lh:1.08; --intro-ls:-.03em;
  --chapter-size:clamp(40px,6.4vw,104px); --chapter-size-phone:clamp(40px,12vw,64px); --chapter-lh:.92; --chapter-ls:-.05em;
  --num:tabular-nums;

  /* shape */
  --r-pic:2px; --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;   /* pic: the barely-there corner on pictures; xs: tags and small chips */
  /* depth: four shadows, from a hairline lift to a dialog; everything that floats takes one */
  --sh-1:0 1px 2px rgba(0,0,0,.06);
  --sh-card:0 1px 2px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.10);
  --sh-pop:0 1px 2px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.14);
  --sh-dialog:0 1px 2px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.18);
  --sh-on-pic:0 2px 6px rgba(0,0,0,.35);   /* controls sitting on top of a picture */
  /* frosted glass: soft for the veil behind a dialog, glass for bars and panels over content */
  --blur-soft:blur(8px); --blur-glass:blur(14px) saturate(1.3);
  --scrim:rgba(245,245,243,.6);
  /* buttons: every button on the site takes its shape, size and colour from here */
  --btn-r:var(--r-pill); --btn-fw:500; --btn-press:.97;
  --btn-h-sm:32px; --btn-px-sm:12px; --btn-fs-sm:13px;
  --btn-h:40px;    --btn-px:16px;    --btn-fs:14px;
  --btn-h-lg:52px; --btn-px-lg:24px; --btn-fs-lg:var(--fs-body);
  --btn-primary:var(--ink); --btn-primary-fg:#fff; --btn-primary-hover:#2a2a2a;
  --btn-secondary:var(--fill); --btn-secondary-fg:var(--ink); --btn-secondary-hover:var(--fill-2);
  --btn-ghost-fg:var(--grey); --btn-ghost-hover:var(--fill);
  --btn-danger:var(--danger); --btn-danger-fg:#fff;
  --btn-float-shadow:0 8px 24px rgba(0,0,0,.16);
  --btn-focus:0 0 0 2px var(--paper),0 0 0 4px rgba(17,17,17,.35);
  /* fields: every text input, textarea and select; the same heights as the buttons so they sit in a row together */
  --field-h:var(--btn-h); --field-h-lg:44px; --field-px:14px; --field-r:var(--r-sm); --field-fs:var(--fs-body);
  --field-bg:var(--paper); --field-line:var(--line); --field-line-focus:var(--grey-3); --field-ring:0 0 0 3px rgba(17,17,17,.06);
  --field-fill:var(--fill);   /* the filled kind (sign-in, dialogs): grey until focused, then white */
  --field-ph:var(--grey-2);
  /* the cursor (cursor.js): a Figma-style arrow and hand in your colour, cobalt when alone, your --pc-* colour once
     someone else is on the page; the tag beside it turns ink over anything you can press */
  --cur-alone:var(--cobalt); --cur-hot:var(--ink);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.3,.64,1);
  --dur-instant:50ms; --dur-quick:150ms; --dur-base:250ms; --dur-slow:350ms; --dur-reveal:500ms;
  --rise:12px; --rise-blur:3px; --stagger:40ms;

  /* older names, kept so every file reads the same values */
  --out:var(--ease-out); --ds-out:var(--ease-out); --spring:var(--ease-spring);
  --f1:var(--fill); --f2:var(--fill-2); --f3:var(--fill-3); --tile:var(--fill);
  --ds-ink:var(--ink); --ds-grey:var(--grey); --ds-line:var(--line); --ds-fill:var(--fill); --ds-fill2:var(--fill-2);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-quick:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-reveal:0ms;--rise:0px;--rise-blur:0px;--stagger:0ms}
}