/* =============================================
   TARUGITOS — Design Tokens
   Phase 1 | CSS Custom Properties
   ============================================= */

:root {
  /* === BRAND COLORS === */
  --pink:          #EC1C70;
  --pink-dark:     #C51460;
  --pink-light:    #FF4D95;
  --pink-glow:     rgba(236, 28, 112, 0.30);
  --yellow:        #F7B51B;
  --yellow-dark:   #D49B0F;
  --yellow-glow:   rgba(247, 181, 27, 0.30);
  --orange:        #F7941D;
  --black:         #0A0A0A;
  --black-soft:    #141414;
  --black-card:    #1A1A1A;
  --black-border:  #2A2A2A;
  --cream:         #FAF8F5;
  --cream-dark:    #F0EDE8;
  --cream-border:  #E0DDD8;
  --red:           #E32728;
  --red-dark:      #B91C1C;
  --purple:        #8B2FC9;
  --green:         #27A845;
  --white:         #FFFFFF;
  --gray-text:     #77716E;
  --gray-light:    #B0ABA7;
  --gray-border:   #E0DDD8;
  --gray-bg:       #F3F0EC;

  /* === TYPOGRAPHY === */
  --font-display:  'Anton', Impact, sans-serif;
  --font-body:     'Poppins', system-ui, -apple-system, sans-serif;

  /* === FONT SIZES (mobile-first) === */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   4.5rem;    /* 72px */

  /* === SPACING === */
  --space-1:   0.25rem;    /* 4px  */
  --space-2:   0.5rem;     /* 8px  */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* === BORDER RADIUS === */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-2xl:    32px;
  --radius-pill:   100px;
  --radius-circle: 50%;

  /* === SHADOWS === */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:     0 10px 20px -3px rgba(0,0,0,0.12), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:     0 20px 40px -5px rgba(0,0,0,0.15);
  --shadow-card:   0 2px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-pink:   0 4px 20px var(--pink-glow), 0 2px 8px var(--pink-glow);
  --shadow-yellow: 0 4px 20px var(--yellow-glow), 0 2px 8px var(--yellow-glow);
  --shadow-inset:  inset 0 2px 4px rgba(0,0,0,0.15);

  /* === TRANSITIONS === */
  --ease-fast:     150ms ease;
  --ease-base:     250ms ease;
  --ease-slow:     400ms ease;
  --ease-bounce:   300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:   500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* === LAYOUT === */
  --container-max:   1280px;
  --container-wide:  1440px;
  --nav-height:      68px;
  --announce-height: 40px;
  --section-pad-y:   var(--space-16);
  --section-pad-x:   var(--space-4);

  /* === Z-INDEX === */
  --z-base:     1;
  --z-above:    10;
  --z-float:    50;
  --z-nav:      100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* Larger screens: scale up some tokens */
@media (min-width: 768px) {
  :root {
    --section-pad-y: var(--space-24);
    --section-pad-x: var(--space-8);
  }
}