@import url("fonts.css");

:root {
  /* Stone / Ton foundation — Verde limao / Verde medio / Verde escuro / Branco (manual Ton 2025) */
  --color-brand-lime: #a5fa00;
  --color-brand-green: #00d700;
  --color-brand-green-dark: #004921;
  --color-offer-mint: #0fe1b9;
  --color-offer-blue: #1e7dff;
  --color-offer-yellow: #ffeb41;
  --color-offer-offwhite: #f5fff5;
  --color-offer-pink: #ff3c96;
  /* nomes legados (yellow) agora apontam para o verde limao Ton */
  --color-brand-yellow: #a5fa00;
  --color-brand-yellow-strong: #8fe000;
  --color-brand-yellow-soft: #e6ffb3;
  --color-brand-blue: #004921;
  --color-brand-blue-hover: #00361a;
  --color-brand-blue-active: #002610;
  --color-ink-900: #20252a;
  --color-ink-700: #31383f;
  --color-ink-500: #67707d;
  --color-ink-300: #d5dee8;
  --color-white: #ffffff;
  --color-black: var(--color-ink-900);
  --color-gray-light: #f5fff5;
  --color-gray-dark: var(--color-ink-500);

  --color-primary: var(--color-brand-blue);
  --color-primary-hover: var(--color-brand-blue-hover);
  --color-primary-dark: var(--color-ink-900);
  --color-secondary: var(--color-brand-yellow);
  --color-fire: var(--color-primary);
  --color-gold: var(--color-brand-yellow-strong);
  --color-gold-soft: var(--color-brand-yellow-soft);

  --color-surface: #f5fff5;
  --color-surface-strong: #ffffff;
  --color-page-bg: var(--color-brand-yellow);
  --color-card-bg: #ffffff;
  --color-border: rgba(31, 31, 31, 0.22);
  --color-border-strong: rgba(31, 31, 31, 0.4);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-text-soft: #6a6a6a;
  --color-text-dark: var(--color-ink-900);
  --color-input-bg: #ffffff;
  --color-error: #d71414;
  --color-error-soft: #fe4b4b;
  --color-success: #00a868;
  --color-success-soft: #5dd879;
  --color-btn-disabled: #cdcdcd;
  --color-btn-disabled-text: rgba(31, 31, 31, 0.62);
  /* Botões — guide do cliente (referência Ton) */
  --btn-h: 56px;
  --btn-radius: 20px;
  --btn-px: 24px;
  --btn-fs: 14px;
  --btn-lh: 130%;
  --btn-ink: #1b221f;
  --btn-lime: #88ff00;
  --btn-lime-hover: #7deb00;
  --btn-gray: #e7e9e9;
  --btn-gray-hover: #d7dad9;
  --btn-dark-bg: #203d00;
  --btn-dark-bg-hover: #2a5200;
  --btn-dark-fg: #fcfdfc;
  --btn-disabled-bg: rgba(0, 0, 0, 0.1);
  --btn-disabled-fg: rgba(0, 0, 0, 0.4);
  --btn-shadow-active: 0 1.5px 1px 0 rgba(0, 31, 21, 0.1);
  --color-focus-ring: rgba(0, 215, 0, 0.4);

  --font-heading: "Ton Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --font-ton: "Ton Condensed", "Arial Narrow", sans-serif;

  --radius-sm: 8px;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 12px;
  --radius-modal: 1.5rem;
  --radius-table: 1.5rem;
  --radius-pill: 999px;

  --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));
  --stone-bp-mobile: 991px;

  --stone-asset-kv: url("../assets/stone/kvPreview.webp");
  --stone-asset-kv-mobile: url("../assets/stone/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(31, 31, 31, 0.18);
  --shadow-card: 0 12px 36px rgba(31, 31, 31, 0.12);
  --glow-mint: 0 0 24px rgba(165, 250, 0, 0.5);
  --glow-teal: 0 0 24px rgba(51, 51, 51, 0.25);
  --glow-accent: var(--glow-mint);
  --glow-red: 0 0 18px rgba(215, 20, 20, 0.22);
  --glow-fire: var(--glow-teal);
  --glow-gold: 0 0 24px rgba(165, 250, 0, 0.45);

  --gradient-page: linear-gradient(180deg, #b8ff33 0%, #a5fa00 60%, #96e600 100%);
  --gradient-brand: linear-gradient(135deg, #a5fa00 0%, #00d700 100%);
  --gradient-fire: linear-gradient(135deg, #004921 0%, #20252a 100%);
  --gradient-hero-overlay: linear-gradient(to left, rgba(31, 31, 31, 0.6) 0%, rgba(31, 31, 31, 0.18) 35%, transparent 58%);

  /* Legacy aliases */
  --color-green-deep: var(--color-primary-dark);
  --color-green: var(--color-primary);
  --color-green-mid: #292929;
  --color-green-dark: var(--color-primary-hover);
  --color-teal-deep: var(--color-primary-dark);
  --color-teal: var(--color-primary);
  --color-teal-mid: #292929;
  --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: #292929;
  --c-teal3: #292929;
  --c-teal4: var(--color-primary-dark);
  --c-teal7: #2d2d2d;
  --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: #7d8fa6;
  --c-darkBlue1: #1e1e1e;
  --c-darkBlue2: #101920;
  --c-darkBlue3: #121b22;
  --c-darkBlue4: #101a22;
  --c-darkBlue5: #16222b;
  --c-darkBlue6: #213744;
  --c-darkBlue7: #262c2d;
  --c-darkBlue8: #36454c;
  --c-white: #ffffff;
  --c-black: var(--color-black);
  --c-black2: #5a635a;
  --c-blackform: #6c757d;
  --c-gray: #f1f3ef;
  --c-gray2: #efeeed;
  --c-graydark: #666666;
  --c-check: var(--color-success);
  --c-error: var(--color-error);
  --c-error1: var(--color-error);
  --c-error2: var(--color-error-soft);
  --c-offwhite: #f5fff5;
  --c-yellow1: var(--color-brand-yellow-strong);
}