/* ============================================================================
   Heldearly — design tokens · THE SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   Every color, space, radius and type value in the product is defined here,
   once. Do not redefine these in any other file or inline <style>.

   The color families are custom ramps anchored in the two exact logo colors.
   They are intentionally warmer and quieter than framework defaults, so the
   system feels like a contemporary family archive rather than a tech product.
   ========================================================================== */
@layer tokens, components, app, surface;

@layer tokens {
:root{
  /* ---- warm neutral ramp ---- */
  --stone-50:#f3efe5;            /* FAMILY PAPER — exact */
  --stone-100:#ebe5d8;           /* WARM CANVAS — exact */
  --stone-200:#e3ded3;
  --stone-300:#cec7bb;
  --stone-400:#a79f93;
  --stone-500:#777168;
  --stone-600:#5f5a53;
  --stone-700:#45413c;
  --stone-800:#2f2c29;
  --stone-900:#201e1c;

  --paper:var(--stone-50);
  --surface:var(--stone-100);
  --card:#faf7ef;
  --line:var(--stone-200);
  --line-2:#eeeae2;
  --text-muted:#6f6a62;          /* AA on Family Paper */
  --text-2:var(--stone-700);

  /* ---- ink ramp — custom, anchored in the exact brand ink ---- */
  --emerald-50:#f2f7f5;
  --emerald-100:#dfece7;
  --emerald-200:#bcd7cd;
  --emerald-300:#8dbdad;
  --emerald-400:#5e9e8a;
  --emerald-500:#3a806d;
  --emerald-600:#246653;
  --emerald-700:#154f40;
  --emerald-800:#0b3c31;
  --emerald-900:#062f27;
  --emerald-950:#022c22;         /* HELDEARLY INK — exact */
  --ink:var(--emerald-950);
  --ink-2:var(--emerald-700);

  /* ---- leaf ramp — custom, anchored in the exact brand leaf ---- */
  --lime-50:#fbfeef;
  --lime-100:#f2fcd6;
  --lime-200:#e2f8ae;
  --lime-300:#cbf580;            /* HELDEARLY LEAF — exact */
  --lime-400:#afe94f;
  --lime-500:#8fd52d;
  --lime-600:#6db31c;
  --lime-700:#528b18;
  --lime-800:#416e1a;            /* text-safe accent on Family Paper */
  --lime-900:#375c1b;
  --lime-950:#1b3308;
  --leaf:var(--lime-300);

  /* ---- named supporting brand colors ---- */
  --family-paper:#f3efe5;
  --warm-canvas:#ebe5d8;
  --archive-forest:#34493a;
  --memory-mist:#e7f0ec;
  --heirloom-sage:#b9d3c8;
  --warm-gray:#6f6a62;

  /* ---- approved gradient treatment — exact Figma values ---- */
  --gradient-ink-start:#064e3b;
  --gradient-ink-end:#022c22;
  --gradient-leaf-start:#cbf580;
  --gradient-leaf-end:#bef264;
  --gradient-ink:linear-gradient(180deg,var(--gradient-ink-start),var(--gradient-ink-end));
  --gradient-leaf:linear-gradient(180deg,var(--gradient-leaf-start),var(--gradient-leaf-end));
  --gradient-icon-shadow:0 4px 102px #022c22;
  --gradient-mark-inner:inset 0 .5px 0 rgb(255 255 255 / .5);

  /* ---- semantic — standard Tailwind, not invented ---- */
  --success:#26805f; --success-bg:#edf8f3;
  --warning:#d97706; --warning-bg:#fffbeb;   /* amber-600 / amber-50 */
  --error:#dc2626;   --error-bg:#fef2f2;     /* red-600 / red-50 */
  --info:#0284c7;    --info-bg:#f0f9ff;      /* sky-600 / sky-50 */

  /* ---- on-surface helpers ---- */
  --scrim:rgb(2 44 34 / .5);
  --shadow-ink:rgb(2 44 34 / .18);
  --shadow-pop:0 18px 40px -24px var(--shadow-ink);
  --shadow-modal:0 30px 80px -30px var(--shadow-ink);
  --shadow-hover:0 14px 32px -20px var(--shadow-ink);

  /* ---- wordmark ---- */
  --wm-font:var(--font-instrument-serif), Georgia, serif; --wm-weight:400;

  /* ---- type families ---- */
  --font-serif:var(--font-instrument-serif), Georgia, serif;  /* display, headlines, wordmark, editorial */
  --font-sans:var(--font-inter), sans-serif;         /* UI, body, product */

  /* ---- radius — soft & organic, echoing the leaf ---- */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---- motion — gentle, unhurried ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s; --t-med:.28s; --t-slow:.45s;

  /* ---- layout ---- */
  --gut:24px;
}
}