/* ==========================================================================
   iSell Brasil — Design Tokens
   Base: mobbin-DS-20260616-F313 (Desing Systen) + cores da marca iSell
   ========================================================================== */

:root {
  /* ——— MARCA iSell ——— */
  --brand-red: #ED3237;
  --brand-red-hover: #d12a2f;
  --brand-green: #00A859;
  --brand-green-hover: #00924d;
  --brand-dark: #201E1E;

  /* ——— CORES: Fundo ——— */
  --color-bg-primary: #FFFFFF;
  --color-bg-footer: #141414;
  --color-bg-surface: rgba(237, 237, 237, 0.64);
  --color-bg-surface-subtle: rgba(64, 64, 64, 0.06);
  --color-bg-surface-hover: rgba(64, 64, 64, 0.08);
  --color-bg-overlay: rgba(116, 116, 116, 0.2);
  --color-bg-muted: rgba(231, 231, 231, 0.4);

  /* ——— CORES: Texto ——— */
  --color-text-primary: #141414;
  --color-text-secondary: #717171;
  --color-text-muted: #ADADAD;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #0099FF;

  /* ——— CORES: Borda ——— */
  --color-border-default: rgba(65, 65, 65, 0.16);
  --color-border-subtle: rgba(64, 64, 64, 0.06);

  /* ——— CORES: Botao ——— */
  --color-btn-primary-bg: #141414;
  --color-btn-primary-bg-hover: #262626;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-bg-hover: rgba(64, 64, 64, 0.06);
  --color-btn-secondary-text: #141414;
  --color-btn-secondary-border: rgba(65, 65, 65, 0.16);

  /* ——— TIPOGRAFIA: Familias ———
     M Saans nao disponivel localmente; usamos stack de sistema proxima
     (grotesca geometrica) que mantem o ar do design original, 100% offline. */
  --font-heading: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-button: var(--font-heading);
  --font-mono: ui-monospace, "Geist Mono", "Courier New", monospace;

  /* ——— TIPOGRAFIA: Tamanhos (fluidos) ——— */
  --text-h1: clamp(40px, 8vw, 80px);
  --text-h2: clamp(30px, 5vw, 56px);
  --text-h3: clamp(20px, 2.4vw, 24px);
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-button: 16px;

  /* ——— TIPOGRAFIA: Pesos ——— */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 700;

  /* ——— TIPOGRAFIA: Line Heights ——— */
  --lh-h1: 1.02;
  --lh-h2: 1.05;
  --lh-h3: 1.25;
  --lh-body: 1.5;
  --lh-body-sm: 1.45;

  /* ——— TIPOGRAFIA: Letter Spacing ——— */
  --ls-tight: -0.02em;
  --ls-tighter: -0.03em;
  --ls-wide: 0.2px;

  /* ——— ESPACAMENTO ——— */
  --space-xxs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-xxl: 40px;
  --space-section: 72px;
  --space-section-lg: 96px;

  /* ——— RAIOS DE BORDA ——— */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --radius-round: 99px;

  /* ——— SOMBRAS ——— */
  --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
  --shadow-card: rgba(0, 0, 0, 0.06) 0px 2px 8px 0px;
  --shadow-hover: rgba(0, 0, 0, 0.08) 0px 8px 24px 0px;
  --shadow-elevated: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
                     rgba(0, 0, 0, 0.05) 0px 1px 0px 0px,
                     rgba(255, 255, 255, 0.15) 0px 0px 0px 1px;

  /* ——— MOVIMENTO ——— */
  --duration-fast: 0.2s;
  --duration-normal: 0.218s;
  --duration-medium: 0.3s;
  --duration-slow: 0.4s;
  --ease-default: ease;
  --ease-out: ease-out;

  /* ——— LAYOUT ——— */
  --container: 1200px;
  --container-narrow: 960px;
  --header-h: 72px;

  /* ——— Z-INDEX ——— */
  --z-header: 100;
  --z-overlay: 200;
}