/* ============================================================
   STREET TREES — Design Tokens
   Framework-agnostic CSS custom properties.
   Single source of truth for color, type, spacing, effects.
   A warm, playful, illustrative palette — a cozy afternoon
   in the city. Cream paper, friendly rounded cards, and a
   hand-made collage of orange / pink / olive / yellow.
   Mirrored from the React Tailwind theme (tailwind.config.js).
   ============================================================ */

:root {
  /* ---- Surfaces (warm cream paper) ---- */
  --st-cream: #f0f0e8;        /* page background (Warm White) */
  --st-cream-deep: #e7e6d8;   /* alt sections, sunk panels */
  --st-paper: #fffdf6;        /* raised cards, "cut paper" white */
  --st-paper-warm: #faf6ec;   /* softer card tint */

  /* ---- The warm crayon-box palette (the signature) ---- */
  --st-orange: #e89040;       /* Warm Orange   — primary */
  --st-pink: #e87898;         /* Rose Pink     — secondary */
  --st-olive: #606848;        /* Olive Green   — foliage */
  --st-yellow: #f8c040;       /* Golden Yellow — accent / sun */
  --st-sienna: #c06040;       /* Burnt Sienna  — deep warm */

  /* soft tints for chips + washes */
  --st-orange-soft: #f8e0c8;
  --st-pink-soft: #f8dbe4;
  --st-olive-soft: #dfe1cf;
  --st-yellow-soft: #fdeec2;
  --st-sienna-soft: #f0d8cc;

  /* ---- Warm ink (text) ---- */
  --ink-900: #2f2a20;   /* headings, near-espresso brown */
  --ink-800: #3a352a;   /* body strong */
  --ink-600: #6b6456;   /* body / muted */
  --ink-400: #928b7b;   /* captions, meta */
  --ink-300: #b4ad9c;   /* faint */

  /* ---- Lines / hairlines (soft, warm) ---- */
  --st-line: #e2e0d0;
  --st-line-strong: #d4d1bd;
  --st-line-faint: #ece9dc;

  /* ---- Signature warm gradients ---- */
  --warm-gradient: linear-gradient(120deg, #e89040 0%, #e87898 52%, #f8c040 100%);
  --warm-gradient-soft: linear-gradient(120deg, rgba(232,144,64,.9) 0%, rgba(232,120,152,.9) 52%, rgba(248,192,64,.9) 100%);
  --sky-wash:
    radial-gradient(ellipse at 78% 12%, rgba(248,192,64,.28) 0%, transparent 46%),
    radial-gradient(ellipse at 12% 78%, rgba(232,120,152,.18) 0%, transparent 50%);
  --deco-line: linear-gradient(90deg, transparent, rgba(232,144,64,.5), rgba(232,120,152,.5), transparent);

  /* ---- Soft shadows + the playful hard "cut-paper" offset ---- */
  --shadow-sm: 0 2px 8px rgba(47,42,32,.06);
  --shadow-md: 0 10px 24px rgba(47,42,32,.10);
  --shadow-lg: 0 20px 44px rgba(47,42,32,.13);
  --shadow-pop: 0 4px 0 rgba(47,42,32,.12);          /* the BuildingCard trim */
  --shadow-pop-orange: 0 6px 0 rgba(192,96,64,.28);
  --shadow-pop-olive: 0 6px 0 rgba(96,104,72,.30);

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Fira Sans", system-ui, sans-serif; /* rounded + friendly */
  --font-sans: "Fira Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 48rem;
  --radius-sm: 12px;
  --radius: 18px;          /* friendly rounded default */
  --radius-lg: 28px;       /* generous card radius */
  --radius-xl: 40px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.34, 1.56, .64, 1);   /* gentle overshoot = playful */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);

  /* ---- Confetti dot pattern (soft warm circles) ---- */
  --confetti-pattern: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='12' cy='14' r='4' fill='%23e89040' opacity='0.18'/%3E%3Ccircle cx='52' cy='28' r='5' fill='%23e87898' opacity='0.16'/%3E%3Ccircle cx='30' cy='52' r='4' fill='%23f8c040' opacity='0.20'/%3E%3Ccircle cx='62' cy='60' r='3' fill='%23606848' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E");
}