/* ================================================================
   LA FARM SWAG · Design Tokens
   Single source of truth: palette, type scale, motion, spacing, radius.
   Modifiche qui propagano ovunque (sito vetrina + mini app + admin).
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Outfit:wght@400;500;600;700;800&family=Rubik+Mono+One&display=swap');

:root {
  /* ─── COLOR · Jungle / Gold / Cream ──────────────────────── */
  --bg-deep:        #0A1A12;
  --bg-base:        #0E2418;
  --bg-elevated:    #142C20;
  --surface:        #1A3324;
  --surface-hover:  #224030;
  --surface-glass:  rgba(245, 240, 225, 0.04);

  --accent:         #F2C200;
  --accent-bright:  #FFC42E;
  --accent-press:   #D4A800;
  --accent-soft:    rgba(242, 194, 0, 0.15);

  --accent-2:       #C66A2E;
  --accent-2-soft:  rgba(198, 106, 46, 0.15);

  --text:           #F5F0E1;
  --text-strong:    #FFFAEC;
  --text-muted:     #BFB89F;
  --text-dim:       #6B7263;
  --text-on-accent: #0A1A12;

  --border:         rgba(245, 240, 225, 0.08);
  --border-strong:  rgba(245, 240, 225, 0.16);
  --border-accent:  rgba(242, 194, 0, 0.32);

  --success:        #5DBF7A;
  --danger:         #E25C5C;
  --warning:        #F2C200;

  /* ─── SHADOW · tinted, mai pure-black ───────────────────── */
  --shadow-sm:      0 2px 8px   rgba(0, 0, 0, 0.32);
  --shadow-md:      0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg:      0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow:    0 0 0 1px rgba(242, 194, 0, 0.20),
                    0 12px 36px rgba(242, 194, 0, 0.18);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ─── SPACING · scala 4pt ─────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ─── RADIUS ────────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ─── MOTION ────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ─── TYPOGRAPHY ───────────────────────────────────── */
  --font-display: "Bagel Fat One", system-ui, sans-serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "Rubik Mono One", ui-monospace, monospace;

  /* type scale · major third 1.250 (base 16) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-lg:    20px;
  --fs-xl:    25px;
  --fs-2xl:   31px;
  --fs-3xl:   40px;
  --fs-4xl:   52px;
  --fs-5xl:   68px;
  --fs-6xl:   88px;
  --fs-hero:  clamp(56px, 14vw, 132px);

  /* ─── LAYOUT ────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow:  720px;
  --content-pad-x:   var(--sp-5);

  /* ─── Z-INDEX systemic ──────────────────────────────── */
  --z-base:        0;
  --z-decorative:  1;
  --z-elevated:   10;
  --z-sticky:    100;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-grain:    9999;

  /* ─── iOS safe-area ─────────────────────────────────── */
  --safe-top:    0px;
  --safe-bottom: 0px;
}

@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top:    env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }
}