/* ==========================================================
   CasaShopping Design System — Tokens
   Source: Figma CASASHOPPING-ESTUDO (V2DYHz92V8hcmk5C2JsQsk)
   ========================================================== */

:root {
  /* -------------------------------------------------------
     Colors (HSL)
     ------------------------------------------------------- */

  /* Brand */
  --cs-primary:        210 47% 18%;   /* #162e47 — navy */
  --cs-secondary:      210 12% 55%;   /* #7d8b99 — cinza médio */
  --cs-placeholder:    210 23% 65%;   /* #91a4b9 — cinza claro */

  /* Backgrounds */
  --cs-bg:             210 10% 95%;   /* #f0f1f3 — fundo geral */
  --cs-surface:        0   0%  100%;  /* #ffffff — cards / inputs */
  --cs-surface-alt:    0   0%   98%;  /* #fafafa — texto claro s/ escuro */

  /* Semantic */
  --cs-text-primary:   hsl(var(--cs-primary));
  --cs-text-secondary: hsl(var(--cs-secondary));
  --cs-text-on-dark:   #ffffff;
  --cs-text-muted:     #fafafa;

  /* Overlays */
  --cs-overlay-category: rgba(0, 0, 0, 0.26);
  --cs-overlay-hero:     rgba(13, 27, 42, 0.50);

  /* -------------------------------------------------------
     Typography
     ------------------------------------------------------- */
  --cs-font-base: 'Open Sans', sans-serif;

  --cs-fw-regular:  400;
  --cs-fw-semibold: 600;
  --cs-fw-bold:     700;

  --cs-fs-xs:   9px;
  --cs-fs-sm:  11px;
  --cs-fs-base:12px;
  --cs-fs-md:  14px;
  --cs-fs-lg:  16px;
  --cs-fs-xl:  20px;
  --cs-fs-2xl: 32px;

  --cs-lh-tight:  1.197;
  --cs-lh-normal: normal;

  /* -------------------------------------------------------
     Spacing (base: 4px)
     ------------------------------------------------------- */
  --cs-space-1:  4px;
  --cs-space-2:  8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 20px;
  --cs-space-6: 24px;

  /* -------------------------------------------------------
     Border Radius
     ------------------------------------------------------- */
  --cs-radius-sm:  8px;   /* cards pequenos, inputs */
  --cs-radius-md: 10px;   /* containers médios */
  --cs-radius-lg: 15px;   /* border da tela */
  --cs-radius-xl: 16px;   /* category cards, imagens grandes */
  --cs-radius-2xl:18px;   /* product cards grandes */

  /* -------------------------------------------------------
     Layout / Dimensions
     ------------------------------------------------------- */
  --cs-screen-width:    414px;

  --cs-card-lg-w:       231px;
  --cs-card-lg-h:       306px;
  --cs-card-lg-img-h:   215px;

  --cs-card-sm-w:       124px;
  --cs-card-sm-h:       123px;

  --cs-category-w:      158px;
  --cs-category-h:      219px;

  --cs-searchbar-h:      53px;

  /* -------------------------------------------------------
     Shadows
     ------------------------------------------------------- */
  --cs-shadow-sm:   0 2px 8px  rgba(22, 46, 71, 0.08);
  --cs-shadow-md:   0 4px 16px rgba(22, 46, 71, 0.12);
  --cs-shadow-lg:   0 8px 24px rgba(22, 46, 71, 0.18);

  /* -------------------------------------------------------
     Transitions
     ------------------------------------------------------- */
  --cs-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --cs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --cs-duration-fast:   150ms;
  --cs-duration-base:   200ms;
  --cs-duration-slow:   300ms;

  --cs-transition-base:   all var(--cs-duration-base) var(--cs-ease);
  --cs-transition-spring: all var(--cs-duration-slow) var(--cs-ease-spring);

  /* -------------------------------------------------------
     Z-index
     ------------------------------------------------------- */
  --cs-z-base:    0;
  --cs-z-overlay: 1;
  --cs-z-nav:     2;
  --cs-z-modal:   10;
}