/* ============================================================
   TrailDog Web — Design Tokens
   Mirrors docs/mockup/index.html so the marketing site looks
   like a sibling of the MAUI app. Keep these in sync if the
   app's palette evolves.
   ============================================================ */

:root {
  /* ── Brand ───────────────────────────────────────── */
  --forest-900: #0B3327;
  --forest-800: #0F4C3A;
  --forest-700: #155A40;
  --forest-600: #1E7A4A;
  --forest-500: #2E8B57;
  --forest-300: #7FB69D;
  --forest-100: #D4E7DD;
  --forest-50:  #EAF3EE;

  --gold-600: #B5824B;
  --gold-500: #D4A574;
  --gold-200: #F1DFC4;

  --clay-700: #9C3D2A;
  --clay-500: #C8553D;
  --clay-300: #E89A89;

  --lavender-700: #5544A8;
  --lavender-100: #E5E0F2;

  --amber-500: #E0A82E;

  /* ── Surface ─────────────────────────────────────── */
  --bg:          #F2EFE7;
  --surface:     #FFFFFF;
  --surface-2:   #FAF7F0;
  --surface-3:   #EBE6D9;
  --border:      #E1DBCB;
  --border-soft: #ECE7D7;
  --hairline:    #D5CFBE;

  /* ── Text ─────────────────────────────────────────── */
  --ink-900: #13201A;
  --ink-700: #2C3530;
  --ink-500: #5A615A;
  --ink-400: #838A82;
  --ink-300: #A8AEA5;

  --good: #2E8B57;
  --warn: #D4A574;
  --bad:  #C8553D;

  /* ── Shadow ───────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(20,30,25,.06), 0 1px 1px rgba(20,30,25,.04);
  --shadow-md:    0 6px 14px -6px rgba(20,40,30,.18), 0 2px 6px -3px rgba(20,40,30,.10);
  --shadow-lg:    0 24px 48px -24px rgba(20,40,30,.30), 0 6px 14px -8px rgba(20,40,30,.18);
  --shadow-phone: 0 32px 64px -28px rgba(15,40,30,.45), 0 12px 28px -16px rgba(15,40,30,.25);
  --shadow-cta:   0 12px 28px -16px rgba(15,80,55,.7);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Type scale ───────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
}

[data-theme="dark"] {
  --bg:          #0A0F0C;
  --surface:     #13191A;
  --surface-2:   #181F1F;
  --surface-3:   #1F2828;
  --border:      #262E2D;
  --border-soft: #1F2727;
  --hairline:    #2D3635;

  --ink-900: #EFEAE0;
  --ink-700: #CDC8BE;
  --ink-500: #9098A0;
  --ink-400: #6E7470;
  --ink-300: #54595A;

  --forest-100: #1E3A2D;
  --forest-50:  #16241D;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-md:    0 6px 14px -6px rgba(0,0,0,.55), 0 2px 6px -3px rgba(0,0,0,.4);
  --shadow-lg:    0 24px 48px -24px rgba(0,0,0,.7), 0 6px 14px -8px rgba(0,0,0,.5);
  --shadow-phone: 0 32px 64px -28px rgba(0,0,0,.6), 0 12px 28px -16px rgba(0,0,0,.4);
  --shadow-cta:   0 12px 28px -16px rgba(0,0,0,.7);
}