/* ============================================
   NEXA PHOTOBOOTH — Design Tokens
   Based on DESIGN.md: Terracotta / Warm Brown
   ============================================ */

:root {
  /* ── Primary Brand ── */
  --brand:          #CE7B67;   /* Brand Terracotta — primary CTA */
  --brand-hover:    #B8654F;   /* Hover state */
  --brand-active:   #A35741;   /* Active/pressed */
  --brand-pale:     rgba(206,123,103,0.10);
  --brand-shadow:   rgba(224,183,169,0.40);

  /* ── Secondary ── */
  --brown:          #6B5B54;
  --cocoa:          #2A150C;
  --rust:           #6B2D0F;
  --dusty:          #8A6A5A;

  /* ── Accent / Tints ── */
  --taupe:          #E0B7A9;
  --tan:            #C9A99A;
  --muted-brown:    #C09580;

  /* ── Semantic ── */
  --warning:        #D5A11F;
  --success:        #2D7A4F;
  --error:          #C0392B;

  /* ── Neutrals ── */
  --black:          #000000;
  --near-black:     #111111;
  --dark:           #151515;
  --charcoal:       #222222;
  --dark-gray:      #2A2A2A;
  --gray:           #333333;
  --white:          #FFFFFF;
  --cream:          #ECDEDA;
  --surface:        #F8F4F2;

  /* ── Borders & Shadows ── */
  --border:         rgba(217,185,171,0.40);
  --border-hover:   rgba(217,185,171,0.70);
  --shadow-sm:      rgba(224,183,169,0.30) 0px 4px 12px 0px, rgba(0,0,0,0.08) 0px 2px 4px 0px;
  --shadow-md:      rgba(224,183,169,0.40) 0px 8px 24px 0px, rgba(0,0,0,0.10) 0px 4px 8px 0px;
  --shadow-lg:      rgba(224,183,169,0.50) 0px 16px 48px 0px, rgba(0,0,0,0.12) 0px 8px 16px 0px;

  /* ── Radius ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ── Typography ── */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing ── */
  --s1:  8px;
  --s2:  12px;
  --s3:  16px;
  --s4:  20px;
  --s5:  24px;
  --s6:  32px;
  --s7:  40px;
  --s8:  48px;
  --s9:  56px;
  --s10: 64px;
  --s11: 80px;
  --s12: 96px;

  /* ── Transitions ── */
  --t:      0.20s ease;
  --t-slow: 0.35s ease;
}