/* ==========================================================================
   DOHA CLOUD DESIGN SYSTEM — TOKENS
   Arquitetura em 3 camadas:
     1. PRIMITIVOS  — valores crus. Nunca use direto em componentes.
     2. SEMÂNTICOS  — significado + tema (light/dark). Use estes no layout.
     3. COMPONENTE  — tokens de um componente específico. Use para variações.

   Loja popular, para todo mundo: fundo branco, o preto e o amarelo dos
   banners da marca, texto grande em Manrope (a fonte das artes), preço em
   destaque e ícone sempre acompanhado de palavra.
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVOS
   ========================================================================== */
:root {
  /* --- Neutros: o preto dos banners (#191919) até o branco --- */
  --p-gray-0:   #ffffff;
  --p-gray-25:  #fbfbfa;
  --p-gray-50:  #f5f5f3;   /* faixa de seção alternada */
  --p-gray-100: #eeeeeb;   /* palco das fotos */
  --p-gray-200: #e2e2de;   /* borda */
  --p-gray-300: #cfcfca;
  --p-gray-400: #a3a39e;
  --p-gray-500: #7a7a75;
  --p-gray-600: #5c5c58;
  --p-gray-700: #42423f;
  --p-gray-800: #2b2b29;
  --p-gray-850: #222221;
  --p-gray-900: #191919;   /* fundo dos banners */
  --p-gray-925: #141414;
  --p-gray-950: #0f0f0f;
  --p-gray-1000:#000000;

  /* Aliases do tema anterior — a documentação ainda lê paper/ink */
  --p-paper-0:   var(--p-gray-0);
  --p-paper-50:  var(--p-gray-25);
  --p-paper-100: var(--p-gray-100);
  --p-paper-200: var(--p-gray-200);
  --p-paper-300: var(--p-gray-300);
  --p-ink-400:  var(--p-gray-400);
  --p-ink-500:  var(--p-gray-500);
  --p-ink-600:  var(--p-gray-600);
  --p-ink-700:  var(--p-gray-700);
  --p-ink-800:  var(--p-gray-800);
  --p-ink-900:  var(--p-gray-900);
  --p-ink-950:  var(--p-gray-925);
  --p-ink-1000: var(--p-gray-1000);

  /* --- Amarelo da marca ---
     300 é o amarelo claro das chamadas dos banners; 500 é o ouro do "Doha",
     cor do botão principal (texto preto por cima, contraste 10:1). */
  --p-gold-50:  #fffbeb;
  --p-gold-100: #fff4cc;
  --p-gold-200: #ffeba3;
  --p-gold-300: #ffe482;
  --p-gold-400: #f7cf55;
  --p-gold-500: #efba2e;
  --p-gold-600: #e2a912;
  --p-gold-700: #b7860a;
  --p-gold-800: #8a6508;
  --p-gold-900: #5c4306;

  /* Só para o logo e a documentação; a interface não usa gradiente */
  --p-gold-metal: linear-gradient(180deg, #efba2e 0%, #fdf1d2 49%, #ecb010 100%);
  --p-gold-sheen: var(--p-gold-500);

  /* --- Funcionais --- */
  --p-red-50:  #fdecea;
  --p-red-400: #f47a6b;
  --p-red-600: #d0291b;
  --p-red-700: #b42318;
  --p-green-50:  #e8f6ee;
  --p-green-100: #d3efdf;
  --p-green-400: #4cc47f;
  --p-green-500: #1ea055;
  --p-green-600: #138a44;   /* "no Pix" — 4.6:1 sobre branco */
  --p-green-700: #0f7338;
  --p-green-900: #0a3d1f;
  --p-orange-100: #fff0dc;
  --p-orange-400: #f6a54a;
  --p-orange-700: #b25b07;
  --p-orange-900: #5e2a0a;
  --p-blue-100: #e3edf9;
  --p-blue-400: #7fb0e8;
  --p-blue-600: #1f63b8;
  --p-blue-900: #12335e;

  /* WhatsApp: cor oficial no ícone, verde escuro no botão (texto branco 4.8:1) */
  --p-wa-500: #25d366;
  --p-wa-700: #128c4a;
  --p-wa-800: #0e7a3f;

  /* --- Espaçamento — escala 4pt --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gutter: clamp(16px, 3vw, 40px);

  /* --- Ícones --- */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;

  /* --- Raio: cantos suaves, nada de pílula em tudo --- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 999px;

  /* --- Tipografia ---
     Bricolage Grotesque nos títulos: grotesca com personalidade, pesada e
     um pouco "torta", no espírito do logo de adesivo da marca — é a letra
     grande dos e-commerces de consumo premiados (Koffiracha, MR. POPS).
     Figtree no texto: redonda, aberta e fácil de ler em tela pequena. */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-poster: var(--font-display);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --text-2xs: 0.75rem;   /* 12 */
  --text-xs:  0.8125rem; /* 13 */
  --text-sm:  0.875rem;  /* 14 */
  --text-base:1rem;      /* 16 — base: ninguém aperta o olho */
  --text-md:  1.0625rem; /* 17 */
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  1.5rem;    /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.25rem;   /* 36 */
  --text-4xl: 3rem;      /* 48 */

  --display-xl: clamp(2.25rem, 5vw, 4rem);
  --display-lg: clamp(1.875rem, 3.6vw, 3rem);
  --display-md: clamp(1.5rem, 2.6vw, 2.25rem);
  --display-sm: clamp(1.25rem, 1.8vw, 1.625rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.03em;
  --tracking-caps:  0.06em;

  /* --- Movimento: curto e sem firula --- */
  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  520ms;
  --dur-reveal:  560ms;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Camadas --- */
  --z-base:     0;
  --z-sticky:   10;
  --z-header:   20;
  --z-dropdown: 40;
  --z-float:    60;
  --z-scrim:    90;
  --z-drawer:   100;
  --z-modal:    110;
  --z-toast:    1000;

  /* --- Layout --- */
  --container:      1320px;
  --rail-w:         248px;
  --cart-w:         440px;
  --header-h:       72px;
  --nav-h:          52px;
  --topbar-h:       34px;
  --masthead-h:     calc(var(--header-h) + var(--nav-h));
  --filters-w:      250px;
  --tabbar-h:       60px;
  --tap-min:        44px;
}

/* ==========================================================================
   2. SEMÂNTICOS — tema claro (padrão)
   ========================================================================== */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg:            var(--p-gray-0);
  --surface:       var(--p-gray-0);
  --surface-2:     var(--p-gray-50);
  --surface-3:     var(--p-gray-100);
  --surface-inset: var(--p-gray-50);
  --surface-inverse: var(--p-gray-900);

  /* Cabeçalho: pílula branca flutuando sobre a página */
  --header-bg:     rgba(255, 255, 255, 0.92);
  --header-fg:     var(--p-gray-900);
  --header-muted:  var(--p-gray-500);
  --header-field:  var(--p-gray-50);
  --header-border: var(--p-gray-200);

  --text:          var(--p-gray-800);
  --text-strong:   var(--p-gray-900);
  --text-muted:    var(--p-gray-600);
  --text-subtle:   var(--p-gray-500);
  --text-inverse:  var(--p-gray-0);

  /* Ação principal: botão amarelo com texto preto */
  --brand:         var(--p-gold-500);
  --brand-fill:    var(--p-gold-500);
  --brand-hover:   var(--p-gold-400);
  --brand-active:  var(--p-gold-600);
  --brand-soft:    var(--p-gold-50);
  --brand-soft-fg: var(--p-gray-900);
  --brand-text:    var(--p-gold-800);
  --on-brand:      var(--p-gray-900);
  --brand-ring:    var(--p-gold-500);

  --accent:        var(--p-gold-500);
  --on-accent:     var(--p-gray-900);

  --pix:           var(--p-green-600);
  --sale:          var(--p-red-600);

  --wa:            var(--p-wa-700);
  --wa-hover:      var(--p-wa-800);
  --wa-icon:       var(--p-wa-500);

  --success:       var(--p-green-600);
  --success-soft:  var(--p-green-50);
  --success-fg:    var(--p-green-900);
  --warn:          var(--p-orange-700);
  --warn-soft:     var(--p-orange-100);
  --warn-fg:       var(--p-orange-900);
  --info:          var(--p-blue-600);
  --info-soft:     var(--p-blue-100);
  --info-fg:       var(--p-blue-900);
  --danger:        var(--p-red-600);
  --danger-soft:   var(--p-red-50);
  --danger-ring:   rgba(208, 41, 27, 0.2);

  --line:          var(--p-gray-200);
  --border:        var(--p-gray-200);
  --border-strong: var(--p-gray-300);
  --border-subtle: var(--p-gray-100);

  --nav-bg:        var(--p-gray-850);
  --nav-border:    rgba(255, 255, 255, 0.08);
  --nav-fg:        var(--p-gray-0);
  --nav-fg-hover:  var(--p-gold-300);
  --nav-hover:     rgba(255, 255, 255, 0.06);

  --footer-bg:     var(--p-gray-900);
  --footer-fg:     var(--p-gray-0);
  --footer-muted:  #b9b9b3;
  --footer-title:  var(--p-gold-300);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-chip:   rgba(255, 255, 255, 0.06);

  --focus-color: var(--p-gray-900);
  --focus-ring:  rgba(239, 186, 46, 0.45);

  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 20, 20, 0.12);
  --shadow-xl: 0 24px 64px rgba(20, 20, 20, 0.18);
  --shadow-brand: none;

  --scrim: rgba(15, 15, 15, 0.55);

  --skeleton-base: var(--p-gray-100);
  --skeleton-shine: var(--p-gray-50);

  --media-bg: var(--p-gray-50);
  --cloud: var(--p-gray-100);
}

/* ==========================================================================
   2b. SEMÂNTICOS — tema escuro (opcional, no rodapé)
   ========================================================================== */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #121212;
  --surface:       #1b1b1b;
  --surface-2:     #181818;
  --surface-3:     #242424;
  --surface-inset: #181818;
  --surface-inverse: var(--p-gray-0);

  --header-bg:     rgba(27, 27, 27, 0.92);
  --header-fg:     var(--p-gray-0);
  --header-muted:  #b5b5b0;
  --header-field:  #242424;
  --header-border: rgba(255, 255, 255, 0.1);

  --text:          #e6e6e3;
  --text-strong:   #ffffff;
  --text-muted:    #b0b0ab;
  --text-subtle:   #8c8c87;
  --text-inverse:  var(--p-gray-900);

  --brand:         var(--p-gold-500);
  --brand-fill:    var(--p-gold-500);
  --brand-hover:   var(--p-gold-400);
  --brand-active:  var(--p-gold-600);
  --brand-soft:    rgba(239, 186, 46, 0.12);
  --brand-soft-fg: var(--p-gold-300);
  --brand-text:    var(--p-gold-400);
  --on-brand:      var(--p-gray-900);
  --brand-ring:    var(--p-gold-500);

  --accent:        var(--p-gold-500);
  --on-accent:     var(--p-gray-900);

  --pix:           var(--p-green-400);
  --sale:          var(--p-red-400);

  --wa:            var(--p-wa-700);
  --wa-hover:      var(--p-wa-800);
  --wa-icon:       var(--p-wa-500);

  --success:       var(--p-green-400);
  --success-soft:  rgba(76, 196, 127, 0.14);
  --success-fg:    var(--p-green-400);
  --warn:          var(--p-orange-400);
  --warn-soft:     rgba(246, 165, 74, 0.14);
  --warn-fg:       var(--p-orange-400);
  --info:          var(--p-blue-400);
  --info-soft:     rgba(127, 176, 232, 0.14);
  --info-fg:       var(--p-blue-400);
  --danger:        var(--p-red-400);
  --danger-soft:   rgba(244, 122, 107, 0.14);
  --danger-ring:   rgba(244, 122, 107, 0.3);

  --line:          rgba(255, 255, 255, 0.1);
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --nav-bg:        #161616;
  --nav-border:    rgba(255, 255, 255, 0.06);
  --nav-fg:        var(--p-gray-0);
  --nav-fg-hover:  var(--p-gold-300);
  --nav-hover:     rgba(255, 255, 255, 0.06);

  --footer-bg:     #0c0c0c;
  --footer-fg:     var(--p-gray-0);
  --footer-muted:  #aaaaa5;
  --footer-title:  var(--p-gold-300);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-chip:   rgba(255, 255, 255, 0.05);

  --focus-color: var(--p-gold-300);
  --focus-ring:  rgba(239, 186, 46, 0.4);

  --shadow-xs: none;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-brand: none;

  --scrim: rgba(0, 0, 0, 0.66);

  --skeleton-base: #1f1f1f;
  --skeleton-shine: #2a2a2a;

  --media-bg: #1f1f1f;
  --cloud: #262626;
}

/* O tema escuro é escolha, não padrão: o botão fica no rodapé. */

/* ==========================================================================
   3. TOKENS DE COMPONENTE
   ========================================================================== */
:root {
  --btn-h-sm:      38px;
  --btn-h-md:      46px;
  --btn-h-lg:      54px;
  --btn-px:        var(--space-5);
  --btn-radius:    var(--radius-md);
  --btn-font:      var(--weight-bold);
  --btn-press:     0.97;

  --field-h:       50px;
  --field-radius:  var(--radius-md);
  --field-bg:      var(--surface);
  --field-border:  var(--border-strong);
  --field-focus:   var(--brand);

  --card-radius:   var(--radius-lg);
  --card-bg:       var(--surface);
  --card-border:   var(--border);
  --card-shadow:   none;
  --card-shadow-hover: var(--shadow-md);
  --card-lift:     -3px;
  --card-media:    96px;

  --chip-h:        38px;
  --chip-radius:   var(--radius-full);
  --badge-radius:  var(--radius-full);

  --sheet-radius:  var(--radius-xl);
  --drawer-shadow: var(--shadow-xl);

  --toast-radius:  var(--radius-md);
  --toast-w:       min(400px, calc(100vw - 32px));
}