/* ─────────────────────────────────────────────────────────────────
   AMAGRA · "Gilded Calm" — the ONE shared palette.
   Loaded by BOTH surfaces so they can never drift apart:
     · public/landing.html  (marketing page)
     · index.html → src/index.css  (the desktop app)
   ui/src/theme.js mirrors these values as JS constants (React inline
   styles need raw hex for alpha-suffix templates like `${T.accent}44`).
   If you change a value here, change theme.js in the same commit.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Canvas — layered creams (dark → light) */
  --l0: #EDE8DF;
  --l1: #F4F0E8;   /* inset wells / chips        (T.surface2) */
  --l2: #FAF7F2;   /* raised panels              (T.surface)  */
  --l3: #FCFAF7;
  --l4: #FEFCFA;

  --app-bg:  #F0E9DF;   /* app + landing hero canvas (T.bg) */
  --border:  #E0D6C4;   /* hairlines on cream        (T.border) */

  /* Landing section washes */
  --hero-bg:     #F0E9DF;
  --features-bg: #EDE8DF;
  --agents-bg:   #F3EDE6;
  --how-bg:      #E9E3DA;
  --pricing-bg:  #F1EBE3;
  --cta-bg:      #EDE8DF;
  --footer-bg:   #E5DFD6;
  --cos-bg:      #EBE5DC;
  --compare-bg:  #F0EAE1;
  --trust-bg:    #E8E2D9;

  /* Brand — the 5-step gold ramp */
  --g1: #FFE880;
  --g2: #DEB838;
  --g3: #C48808;   /* gold core — fills, dots, borders (T.accent)  */
  --g4: #9A6C00;   /* deep gold — hovers, links       (T.accent2) */
  --g5: #6C4C00;

  --gold-text: #8A5A00;   /* gold as TEXT on cream (~5:1 AA) (T.accentText) */

  /* Text — warm umber ramp */
  --t1: #2E2010;   /* primary                     (T.text)    */
  --t2: #5C4030;   /* secondary                   (T.mutedLt)  */
  --t3: #9A7A60;   /* decorative-only on landing — below AA as body text */
  --t4: #BEA890;

  --text-muted: #806044;   /* app tertiary text — AA-legible (T.muted) */

  /* Semantic status */
  --ok:    #15803D;   /* T.success */
  --warn:  #A16207;   /* T.warn    */
  --error: #B42318;   /* T.error   */

  /* Warm shadows (never pure black) + paper highlights */
  --sd1: rgba(72, 52, 28, 0.07);
  --sd2: rgba(72, 52, 28, 0.11);
  --sd3: rgba(62, 44, 20, 0.17);
  --sl1: rgba(255, 255, 255, 0.80);
  --sl2: rgba(255, 255, 255, 0.94);

  /* Gold glows */
  --gg1: rgba(196, 136, 8, 0.13);
  --gg2: rgba(196, 136, 8, 0.28);
  --gg3: rgba(154, 108, 0, 0.44);

  /* ── Card elevation — ONE recipe for every card in the app ──────────────
     Cards used to carry a neumorphic OUTER white glow (-3px -3px 11px white):
     it fringed each border with a pale halo, and because it paints outside the
     card box it kept smudging through the sticky page header's fade as content
     scrolled under it. The paper highlight now lives INSIDE the card (an inset
     top edge), so depth reads the same but nothing bleeds past the border.
     Elevation is one warm, centered shadow instead of a bottom-right offset —
     it stays symmetrical without a light source on the opposite corner.
     `theme.js` LUX.cardShadow mirrors these; change both together. */
  --card-border: rgba(182, 138, 50, 0.16);
  --card-shadow:
    0 1px 2px rgba(72, 52, 28, 0.05),
    0 10px 30px -12px rgba(72, 52, 28, 0.18),
    inset 0 1px 1px var(--sl2),
    inset 0 -1px 1px rgba(138, 99, 36, 0.04);
  /* Container hover: the gold whisper, no geometry change. */
  --card-shadow-hover:
    0 1px 2px rgba(72, 52, 28, 0.05),
    0 10px 30px -12px rgba(72, 52, 28, 0.18),
    inset 0 1px 1px var(--sl2),
    inset 0 -1px 1px rgba(138, 99, 36, 0.04),
    0 0 28px var(--gg1);
  /* Interactive tiles only — a discrete object that lifts toward the cursor. */
  --card-shadow-lift:
    0 2px 4px rgba(72, 52, 28, 0.06),
    0 18px 40px -16px rgba(62, 44, 20, 0.28),
    inset 0 1px 1px var(--sl2),
    0 0 24px var(--gg1);
}