@import url("fonts.css");

:root {
  /* SumUp — paleta do site (Circuit UI) + complementos do KV "Mais Tap, Mais Chances" */
  --sumup-pink: #ff61f2;
  --sumup-pink-hover: #eb58df;
  --sumup-pink-pressed: #da4ece;
  --sumup-pink-strong: #b342a9;
  --sumup-pink-text: #a33e9a;
  --sumup-pink-soft: #ffe4fd;
  --sumup-pink-light: #ffacf8;
  --sumup-pink-bag: #ff8ef3;

  --sumup-ink: #1e1c1c;
  --sumup-ink-box: #1c1a1a;
  --sumup-ink-hover: #494a4a;
  --sumup-ink-pressed: #696969;
  --sumup-ink-subtle: #706464;
  --sumup-ink-placeholder: #76716b;
  --sumup-on-ink: #fbfbf9;
  --sumup-on-ink-subtle: rgba(251, 251, 249, 0.7);

  --sumup-surface: #fbfbf9;
  --sumup-surface-subtle: #f5f4ed;
  --sumup-surface-neutral: #f0eee7;
  --sumup-surface-highlight: #e8e6dc;
  --sumup-kv-bg: #f0f1e7;

  --sumup-border-subtle: #e3e2d6;
  --sumup-border: #d0cdc3;
  --sumup-divider: #e7e6df;

  --sumup-dark: #250723;
  --sumup-dark-subtle: #3a1037;
  --sumup-dark-highlight: #63215e;
  --sumup-dark-elevated: #322430;

  --sumup-yellow: #f6cb32;
  --sumup-yellow-hover: #e9bc1f;
  --sumup-blue: #2f98eb;
  --sumup-lavender: #9a9def;
  --sumup-gold: #fffbcf;
  --sumup-terracotta: #5d1a03;
  --sumup-leaf: #174104;

  --sumup-success: #1e862d;
  --sumup-success-text: #3c7411;
  --sumup-success-bg: #dff4e2;
  --sumup-danger: #d23f04;
  --sumup-danger-text: #b13606;
  --sumup-danger-bg: #ffdacc;
  --sumup-warning: #da7603;
  --sumup-warning-bg: #feeed5;

  /* Nomes semânticos usados no CSS herdado — todos apontam para a paleta SumUp */
  --color-brand-lime: var(--sumup-pink);
  --color-brand-green: var(--sumup-pink-strong);
  --color-brand-green-dark: var(--sumup-ink);
  --color-offer-mint: var(--sumup-lavender);
  --color-offer-blue: var(--sumup-blue);
  --color-offer-yellow: var(--sumup-yellow);
  --color-offer-offwhite: var(--sumup-surface);
  --color-offer-pink: var(--sumup-pink);
  --color-brand-yellow: var(--sumup-pink);
  --color-brand-yellow-strong: var(--sumup-pink-hover);
  --color-brand-yellow-soft: var(--sumup-pink-soft);
  --color-brand-blue: var(--sumup-ink);
  --color-brand-blue-hover: var(--sumup-ink-hover);
  --color-brand-blue-active: var(--sumup-ink-pressed);
  --color-ink-900: var(--sumup-ink);
  --color-ink-700: #3c3636;
  --color-ink-500: var(--sumup-ink-subtle);
  --color-ink-300: var(--sumup-border);
  --color-white: #ffffff;
  --color-black: var(--color-ink-900);
  --color-gray-light: var(--sumup-surface-subtle);
  --color-gray-dark: var(--color-ink-500);

  --color-primary: var(--sumup-ink);
  --color-primary-hover: var(--sumup-ink-hover);
  --color-primary-dark: var(--sumup-ink);
  --color-secondary: var(--sumup-pink);
  --color-fire: var(--color-primary);
  --color-gold: var(--sumup-yellow);
  --color-gold-soft: var(--sumup-gold);

  --color-surface: var(--sumup-surface);
  --color-surface-strong: #ffffff;
  --color-page-bg: var(--sumup-kv-bg);
  --color-card-bg: #ffffff;
  --color-border: var(--sumup-border);
  --color-border-strong: rgba(30, 28, 28, 0.4);
  --color-text: var(--sumup-ink);
  --color-text-muted: var(--sumup-ink-subtle);
  --color-text-soft: var(--sumup-ink-placeholder);
  --color-text-dark: var(--sumup-ink);
  --color-input-bg: #ffffff;
  --color-error: var(--sumup-danger-text);
  --color-error-soft: var(--sumup-danger);
  --color-success: var(--sumup-success);
  --color-success-soft: #89ec90;
  --color-btn-disabled: var(--sumup-surface-highlight);
  --color-btn-disabled-text: rgba(30, 28, 28, 0.5);

  /* Botões — Circuit UI (sumup.com): raio 12px, borda 1px, SumUp Narrow semibold 17px */
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --btn-radius: 12px;
  --btn-radius-sm: 10px;
  --btn-px: 24px;
  --btn-px-sm: 16px;
  --btn-fs: 17px;
  --btn-fs-sm: 15px;
  --btn-fw: 600;
  --btn-lh: 22px;
  --btn-border-w: 1px;
  --btn-ink: var(--sumup-ink);

  /* Destaque (amarelo) — ação principal / cadastro */
  --btn-yellow-bg: var(--sumup-yellow);
  --btn-yellow-bg-hover: var(--sumup-yellow-hover);
  --btn-yellow-bg-pressed: #d9ad14;
  --btn-yellow-fg: var(--sumup-ink);

  /* Padrão (preto) */
  --btn-dark-bg: var(--sumup-ink);
  --btn-dark-bg-hover: #3f3a3a;
  --btn-dark-bg-pressed: #756c6c;
  --btn-dark-fg: var(--sumup-on-ink);

  /* Secundário (contorno preto) */
  --btn-outline-border: var(--sumup-ink);
  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: rgba(30, 28, 28, 0.06);
  --btn-outline-bg-pressed: rgba(30, 28, 28, 0.12);
  --btn-outline-fg: var(--sumup-ink);

  /* Neutro (cinza) */
  --btn-gray: var(--sumup-surface-neutral);
  --btn-gray-hover: var(--sumup-surface-highlight);
  --btn-gray-pressed: #d9d6c7;

  --btn-disabled-bg: rgba(30, 28, 28, 0.1);
  --btn-disabled-fg: rgba(30, 28, 28, 0.5);
  --btn-disabled-border: rgba(30, 28, 28, 0.2);
  --btn-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--sumup-ink);
  --color-focus-ring: rgba(255, 97, 242, 0.45);

  --font-heading: "SumUp Black", "SumUp Black fallback", Arial, system-ui, sans-serif;
  --font-body: "SumUp Narrow", "SumUp Narrow fallback", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --font-display: var(--font-heading);

  --radius-sm: 8px;
  --radius-btn: 999px;
  --radius-card: 24px;
  --radius-input: 12px;
  --radius-modal: 24px;
  --radius-table: 24px;
  --radius-pill: 999px;
  --radius-xl: 32px;
  --radius-2xl: 40px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --header-h: 72px;
  --wc-menu-h: 67px;
  --promo-encerrada-h: 0px;
  --countdown-h: 0px;
  /* Countdown sobrepoe o conteudo - nao entra no empurrao do layout */
  --hero-stack-h: calc(var(--header-h) + var(--promo-encerrada-h, 0px));
  --sumup-bp-mobile: 991px;

  --sumup-asset-kv: url("../assets/sumup/kvPreview.webp");
  --sumup-asset-kv-mobile: url("../assets/sumup/kvPreview.webp");

  --hero-kv-mobile-h: calc(100vw * 1920 / 1080);
  --hero-mobile-content-offset: clamp(1.6rem, calc(var(--hero-kv-mobile-h) * 0.12), 4rem);
  --hero-mobile-content-offset-flow: clamp(1.2rem, calc(var(--hero-kv-mobile-h) * 0.1), 3.2rem);
  --hero-mobile-content-offset-logged: clamp(1.4rem, calc(var(--hero-kv-mobile-h) * 0.11), 3.6rem);

  --container: 1120px;
  --container-narrow: 720px;

  --shadow-lg: 0 20px 54px rgba(30, 28, 28, 0.16);
  --shadow-card: 0 12px 36px rgba(30, 28, 28, 0.1);
  --glow-mint: 0 0 24px rgba(255, 97, 242, 0.45);
  --glow-teal: 0 0 24px rgba(30, 28, 28, 0.2);
  --glow-accent: var(--glow-mint);
  --glow-red: 0 0 18px rgba(210, 63, 4, 0.22);
  --glow-fire: var(--glow-teal);
  --glow-gold: 0 0 24px rgba(246, 203, 50, 0.5);

  --gradient-page: linear-gradient(180deg, #f5f6ee 0%, var(--sumup-kv-bg) 60%, #e9eadf 100%);
  --gradient-brand: linear-gradient(135deg, var(--sumup-pink) 0%, var(--sumup-lavender) 55%, var(--sumup-blue) 100%);
  --gradient-fire: linear-gradient(135deg, var(--sumup-ink) 0%, var(--sumup-dark) 100%);
  --gradient-sky: linear-gradient(160deg, var(--sumup-pink-light) 0%, var(--sumup-lavender) 45%, var(--sumup-blue) 100%);
  --gradient-hero-overlay: linear-gradient(to left, rgba(30, 28, 28, 0.6) 0%, rgba(30, 28, 28, 0.18) 35%, transparent 58%);

  /* Legacy aliases */
  --color-green-deep: var(--color-primary-dark);
  --color-green: var(--color-primary);
  --color-green-mid: #3c3636;
  --color-green-dark: var(--color-primary-hover);
  --color-teal-deep: var(--color-primary-dark);
  --color-teal: var(--color-primary);
  --color-teal-mid: #3c3636;
  --color-mint: var(--color-brand-yellow);
  --color-accent: var(--color-primary);
  --color-accent-dark: var(--color-primary-dark);

  --c-orange1: var(--color-primary);
  --c-orange2: var(--color-primary);
  --c-orange3: var(--color-primary-dark);
  --c-teal1: var(--color-primary);
  --c-teal2: #3c3636;
  --c-teal3: #3c3636;
  --c-teal4: var(--color-primary-dark);
  --c-teal7: #2d2a2a;
  --c-red1: var(--color-primary);
  --c-red2: var(--color-primary);
  --c-maroon1: var(--color-primary-dark);
  --c-maroon2: var(--color-primary-dark);
  --c-wine: var(--color-black);
  --c-blue1: var(--sumup-lavender);
  --c-darkBlue1: var(--sumup-ink);
  --c-darkBlue2: var(--sumup-dark);
  --c-darkBlue3: var(--sumup-dark);
  --c-darkBlue4: var(--sumup-dark);
  --c-darkBlue5: var(--sumup-dark-elevated);
  --c-darkBlue6: var(--sumup-dark-subtle);
  --c-darkBlue7: var(--sumup-ink);
  --c-darkBlue8: var(--sumup-dark-highlight);
  --c-white: #ffffff;
  --c-black: var(--color-black);
  --c-black2: var(--sumup-ink-subtle);
  --c-blackform: var(--sumup-ink-placeholder);
  --c-gray: var(--sumup-surface-subtle);
  --c-gray2: var(--sumup-surface-neutral);
  --c-graydark: var(--sumup-ink-subtle);
  --c-check: var(--color-success);
  --c-error: var(--color-error);
  --c-error1: var(--color-error);
  --c-error2: var(--color-error-soft);
  --c-offwhite: var(--sumup-surface);
  --c-yellow1: var(--sumup-yellow);
}