/* ============================================================================
   Avogado — design tokens
   The app's own palette (design_handoff_avogado_website): dark avocado-skin
   panels, paper background, sage primary. Site → app should feel seamless.
   ========================================================================== */

/* ---- Brand serif: Source Serif 4 (variable), self-hosted ---------------- */
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* ---- UI / body: Public Sans (variable), self-hosted --------------------- */
@font-face {
  font-family: "Public Sans Variable";
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Type families ---------------------------------------------------- */
  --serif: "Source Serif 4 Variable", "Iowan Old Style", "Iowan", Charter,
           Georgia, serif;
  --sans:  "Public Sans Variable", -apple-system, BlinkMacSystemFont,
           "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
           "Roboto Mono", Menlo, Consolas, monospace;

  /* ---- Dark avocado-skin panels (CTA band, footer, demo sidebar) -------- */
  --skin:     #23281B;
  --skin2:    #2C3222;   /* dark hover / hairlines on dark */
  --skin3:    #39412D;   /* dark selected */
  --skinTx:   #E8E4D4;   /* text on dark */
  --skinMut:  #9BA083;   /* muted text on dark */

  /* ---- Light surfaces ---------------------------------------------------- */
  --paper:    #F1EDE0;   /* page background */
  --surf:     #FBF9F1;   /* alternating section bands, raised surfaces */
  --card:     #FFFFFF;   /* cards, document sheets */

  /* ---- Ink ---------------------------------------------------------------- */
  --ink:      #2B291F;   /* primary text */
  --inkSoft:  #57543F;   /* secondary text, eyebrows */
  --mut:      #8A856B;   /* tertiary / muted */

  /* ---- Hairlines ---------------------------------------------------------- */
  --line:     #E6E1CF;   /* hairline borders */
  --line2:    #D7D1BA;   /* stronger borders, section left-rules */

  /* ---- Sage accent (buttons, verified, progress) -------------------------- */
  --accent:      #5B7338;
  --accentDeep:  #435628;   /* button border/hover, link color */
  --accentSoft:  #EDF1DF;   /* sage tint bg */
  --accentSoft2: #DCE4C4;   /* sage tint border, ghost numerals */

  /* ---- Semantic hues (provenance + status; these MEAN something) ---------- */
  --pit:        #9A6B3C;   /* reasoned provenance, subject-party chips */
  --pitSoft:    #F1E7D6;
  --danger:     #A9472E;   /* flagged provenance, deletions, other side */
  --dangerSoft: #F4E5DE;
  --amber:      #B4832B;   /* needs-you / open items */
  --amberSoft:  #F5ECD7;
  --amberLine:  #E8D9B4;
  --blue:       #3C6C8C;   /* corpus provenance, neutral / research */
  --blueSoft:   #E2ECF1;

  /* ---- Brand green (on dark) + avatar -------------------------------------- */
  --logoGreen:  #9DB35A;   /* "Av" in wordmark on dark, live dots on dark */
  --avatarGrad: linear-gradient(150deg, #6E8A44, #455A28);

  /* ---- Radii ---------------------------------------------------------------- */
  --r-btn:   10px;
  --r-card:  12px;
  --r-frame: 14px;
  --r-pill:  20px;
  --r-doc:   4px;    /* document sheets: deliberately crisp */

  /* ---- Layout ---------------------------------------------------------------- */
  --maxw: 1160px;
  --pad-x: 32px;
  --section-y: 96px;
  --section-y-dark: 88px;

  /* ---- Shadows ---------------------------------------------------------------- */
  --sh-frame:  0 30px 90px rgba(40, 42, 22, .30);
  --sh-sheet:  0 4px 24px rgba(43, 41, 31, .06);
  --sh-card:   0 3px 14px rgba(43, 41, 31, .05);
  --sh-hover:  0 12px 32px rgba(43, 41, 31, .08);
  --sh-mascot: drop-shadow(0 24px 40px rgba(40, 42, 22, .18));

  /* ---- Motion (expo-out everywhere, no bounce) -------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-mid:  320ms;

  /* Reveal levels — one constant, set by motion.js from MOTION_LEVEL:
     cinematic (default) 34px/760ms · subtle 10px/420ms */
  --reveal-dist: 34px;
  --reveal-dur:  760ms;
}