/* QuickSnip design tokens · v0.1 · 14 Sep 2026
   Names mirror the site's existing Radix-style ramps so a Tailwind port is mechanical. */
:root{
  /* ramps kept from quicksnip.com */
  --gray-1:#FCFCFC; --gray-2:#F9F9F9; --gray-3:#F0F0F0; --gray-4:#E8E8E8; --gray-5:#E0E0E0; --gray-6:#D9D9D9;
  --gray-7:#CECECE; --gray-8:#BBBBBB; --gray-9:#8D8D8D; --gray-10:#646464; --gray-11:#202020; --gray-12:#0C0C0C;
  --orange-1:#FDFAF8; --orange-2:#FCF5F0; --orange-3:#F9EBE2; --orange-4:#F5DCCB; --orange-5:#EFC9B0; --orange-6:#E8B193;
  --orange-7:#E09879; --orange-8:#DC8466; --orange-9:#D97757; --orange-10:#C46847; --orange-11:#A35438; --orange-12:#5E2F1D;
  --red-9:#E54D2E; --red-11:#CA3214;

  /* semantic */
  --ink:var(--gray-12); --ink-soft:#3D3833; --body:var(--gray-10); --mute:#6F6F6F;   /* 5.0:1 on white, 4.7:1 on paper — gray-9 (#8D8D8D) measured 3.32:1 and failed AA for caption text */
  --paper:#FAF8F5;               /* warm paper · promoted from the hard-coded logo-strip colour */
  --paper-2:#F3F0EB;             /* deeper paper for chips on paper */
  --paper-3:#EDEAE5;             /* message bubbles */
  --screen:#16130F;              /* video stage behind footage */
  --canvas-1:#2B2520; --canvas-2:#17130F;   /* dark editor canvas gradient */
  --white:#FFFFFF;
  --line:#E8E6E3; --line-soft:#F1EFEC;
  --brand:var(--orange-9); --brand-hover:var(--orange-10); --brand-ink:var(--orange-11);
  --brand-cta:#B0583B; --brand-cta-hover:#A45237;   /* primary button fill for WHITE text: 4.88:1 / 5.47:1. Same saturation as the logo's dark stop (#C26040), darkened until white passes. White on orange-9 is 3.12:1 and fails AA. */
  /* UI palette · for product depictions only (graphics, compositions, states). Each hue owns a meaning. tint / fill / text — text steps pass AA on white, paper and their own tint. */
  --ui-blue-tint:#E8EFFC;   --ui-blue:#2F63D6;   --ui-blue-text:#24509F;    /* links, sharing, upload */
  --ui-green-tint:#E4F4EA;  --ui-green:#1F8A5B;  --ui-green-text:#196E49;   /* ready, copied, success, checks */
  --ui-violet-tint:#EEEAFD; --ui-violet:#6A4CE6; --ui-violet-text:#5238B8;  /* AI, transcripts, editing */
  --ui-amber-tint:#FBF1D9;  --ui-amber:#C98A12;  --ui-amber-text:#8A5D0B;   /* offline, modes, attention */
  --ui-red-tint:#FBE9E7;                                                     /* record red is --record */
  --record:var(--red-9);

  /* type */
  --font-display:"Merriweather",Georgia,"Times New Roman",serif;
  --font-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h1:clamp(46px,5.8vw,80px); --h2:clamp(32px,3.4vw,44px);   /* display tracking: 0 to -.005em — Kabir: "breathable", not tight */ --h3-serif:clamp(24px,2.2vw,30px); --h3:22px;
  --sub:20px; --body-size:17px; --ui:16px; --small:15px; --caption:14px; --label:13px; --micro:12px;   /* 12px is the floor */
  --price:44px;

  /* shape + depth */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --shadow-frame:0 30px 80px -30px rgba(12,12,12,.45), 0 8px 24px -12px rgba(12,12,12,.25);
  --shadow-card:0 1px 2px rgba(12,12,12,.04);
  --shadow-float:0 12px 32px -18px rgba(12,12,12,.35);   /* chips, fields, tiles on hover */
  --shadow-soft:0 10px 30px -16px rgba(12,12,12,.16);    /* white cards inside cream frames */
  --ink-a05:rgba(12,12,12,.05); --ink-a35:rgba(12,12,12,.35);
  --white-a10:rgba(255,255,255,.1); --white-a40:rgba(255,255,255,.4); --white-a72:rgba(255,255,255,.72);   /* text on ink needs ≥.72 for AA */
  --focus:0 0 0 2px var(--white), 0 0 0 4px var(--ink);

  /* space */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --section:clamp(64px,7vw,96px);
  --container:1200px; --prose:720px;
  --nav-h:64px;
}