/* Boom Marketing Digital — Color tokens
   Extracted from the production storefront (Home, Carrinho, Pedido Confirmado). */

:root {
  /* ---- Base palette ---- */
  --violet-50:  #f5f3ff;
  --violet-100: #ece9f7;
  --violet-200: #e5e1f5;
  --violet-300: #c4b5fd;
  --violet-400: #afa9ec;
  --violet-500: #8a63e8;
  --violet-600: #6d28d9; /* primary brand violet */
  --violet-700: #4c1d95;
  --violet-900: #1f1b2e; /* near-black plum used for hero/dark cards */
  --violet-900-soft: #3b2e5a; /* gradient partner for violet-900 */
  --violet-150: #e9dffc; /* pale lavender-white — on-dark link idle color, distinct from
     --violet-300 (icon-accent tint) and --white (on-dark link hover/active) */

  --cream-100: #f1efe8; /* page background */
  --cream-50:  #faf9f5;
  --lavender-tint: #f7f6fb; /* soft card fill */

  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-400: #4ade80; /* same green as .boom-combobox__option-promo — "monte seu pedido"'s service-selector promo hint */
  --green-700: #15803d;
  --green-800: #14532d;
  --green-muted: #3a6b4b;

  --amber-50:  #fef3e2;
  --amber-200: #f3d9a4;
  --amber-500: #f59e0b; /* order-progress tracker's "active step" circle (thank you - Aguardando pagamento.dc.html) */
  --amber-700: #b45309;

  --pink-500: #db2777; /* weekend +5% badge */

  /* "tip" semantic (2026-07-19, updated — see explanation.md): info/hint
     content, distinct from success-on-dark (--green-400, the combobox promo
     hint) / warning (amber) / promo (pink). Originally blue (2026-07-18); the
     user asked for the tip color to match the service-selector's promo green
     instead. Reuses the existing --green-50/200/700 triad (already proven
     accessible elsewhere, e.g. .boom-cart-added-popup__icon) rather than the
     raw --green-400 directly, since #4ade80 text/icon on a light tip-card
     background reads as low-contrast — same "same hue, text-safe shade"
     reasoning already applied to the WhatsApp button
     (green-800-on-green-100, not white-on-#25D366). --blue-* kept defined
     (unused for now) rather than deleted, in case a future info/link semantic
     needs it. */
  --blue-50:  #eff6ff;
  --blue-200: #bfdbfe;
  --blue-700: #1d4ed8;

  /* Checkout-page info blue (Carrinho e checkout.dc.html, 2026-07-21 mockup
     revision) — a distinct accent from the --blue-* triad above (which is
     the older, unused "tip" blue): cashboom's banner on this page switched
     from violet to this blue, and it's reused for the "informe seus dados"
     login hint and the link-preview popup's info icon. Kept as its own
     named set rather than overloading --blue-700 since the hex values don't
     match. */
  --checkout-blue-100: #eaf1fb;
  --checkout-blue-300: #d3e3f8;
  --checkout-blue-600: #2f6fed;
  --checkout-blue-800: #1d4fb8;

  /* My Account "detectamos queda" replenishment alert (Minha conta -
     cliente com pedidos.dc.html, lines 439-447) -- its own one-off palette,
     distinct from the generic amber and warning-semantic tokens above
     (checked first, didn't match closely enough to reuse). Button
     background is #de8d1c specifically (not the mockup's own #c2760b,
     which stayed on the icon) -- a deliberate refinement requested after
     review, not a mockup-fidelity value like the other three. */
  --alert-bg: #fef3e8;
  --alert-border: #f7ddb8;
  --alert-icon: #c2760b;
  --alert-button: #de8d1c;
  --alert-text: #8a5410;

  --whatsapp: #25d366;

  --ink-900: #1f1b2e; /* primary text */
  --ink-600: #6b6478;
  --ink-500: #8a8496;
  --ink-400: #9c9aa8;
  --ink-300: #6b7280;
  --white: #ffffff;

  /* ---- Semantic aliases ---- */
  --color-bg-page: var(--cream-100);
  --color-bg-surface: var(--white);
  --color-bg-surface-tint: var(--lavender-tint);
  --color-bg-surface-violet-50: var(--violet-50);
  --color-bg-hero: linear-gradient(135deg, var(--violet-900), var(--violet-900-soft));
  --color-bg-cta: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  --color-bg-success: var(--green-50);
  --color-bg-success-strong: var(--green-100);
  --color-bg-warning: var(--amber-50);
  --color-bg-warning-strong: var(--amber-200);
  --color-bg-tip: var(--green-50);

  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-400);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-soft: var(--violet-300);
  --color-text-brand: var(--violet-600);
  --color-text-brand-deep: var(--violet-700);
  --color-text-success: var(--green-700);
  --color-text-success-deep: var(--green-800);
  --color-text-warning: var(--amber-700);
  --color-text-tip: var(--green-700);

  --color-border-subtle: var(--violet-100);
  --color-border-default: var(--violet-200);
  --color-border-success: var(--green-200);
  --color-border-warning: var(--amber-200);
  --color-border-tip: var(--green-200);
  --color-border-brand: var(--violet-600);

  --color-bg-checkout-info: var(--checkout-blue-100);
  --color-text-checkout-info: var(--checkout-blue-800);
  --color-border-checkout-info: var(--checkout-blue-300);
  --color-icon-checkout-info: var(--checkout-blue-600);

  --color-bg-alert: var(--alert-bg);
  --color-border-alert: var(--alert-border);
  --color-icon-alert: var(--alert-icon);
  --color-bg-alert-cta: var(--alert-button);
  --color-text-alert: var(--alert-text);

  --color-link: var(--violet-600);
  --color-link-hover: var(--violet-700);

  /* On-dark link context (see [data-on-dark] rules in boom.css) — hover/active
     must brighten toward white here, never darken toward --color-link-hover,
     or contrast collapses on violet/plum surfaces (My Account header card,
     footer-trust). */
  --color-link-on-dark: var(--violet-150);
  --color-link-on-dark-hover: var(--white);

  --color-accent-whatsapp: var(--whatsapp);
  --color-accent-pink: var(--pink-500);
}
/* Boom Marketing Digital — Typography tokens */

:root {
  --font-display: 'Sora', sans-serif;     /* headlines only */
  --font-body: 'Inter', sans-serif;       /* everything else */
  /* Icons are masked SVGs (see components/core/Icon.jsx), not a webfont — no --font-icons token needed. */

  /* Type scale — real values found in the storefront (small, dense, mobile-first).
     Do not round to a 4/8px grid; the source uses odd fractional sizes. */
  --text-2xs: 11.05px;
  --text-xs: 12.35px;
  --text-sm: 13.65px;
  --text-base: 14.95px;
  --text-md: 16.25px;
  --text-lg: 18.2px;
  --text-xl: 19.5px;
  --text-2xl: 24.7px;
  --text-3xl: 31.2px;

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

  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-eyebrow: 0.4px;
  --tracking-headline: 0.5px;
  --tracking-normal: normal;

  /* Semantic roles */
  --font-eyebrow: var(--weight-black) var(--text-base) var(--font-body);   /* uppercase kicker labels */
  --font-headline: var(--weight-bold) var(--text-2xl) var(--font-display); /* hero headlines */
  --font-section-title: var(--weight-bold) var(--text-lg) var(--font-display);
  --font-body-md: var(--weight-regular) var(--text-lg) var(--font-body);
  --font-label: var(--weight-semibold) var(--text-sm) var(--font-body);
  --font-caption: var(--weight-regular) var(--text-xs) var(--font-body);
  --font-button: var(--weight-bold) var(--text-sm) var(--font-body);
}
/* Boom Marketing Digital — Spacing tokens
   Real gaps observed range 1–16px in odd increments; scale below covers the
   common stops used across cards, stacks and inline groups. */

:root {
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 48px;

  /* Layout */
  --container-mobile: 375px;
  --page-margin: 16px;
  --card-padding: 16px;
  --card-padding-lg: 20px;
}
/* Boom Marketing Digital — Effects: radii, shadows, borders, motion */

:root {
  /* Radii */
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;   /* default card radius */
  --radius-xl: 20px;   /* hero cards / pill buttons / bottom-nav */
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 0.5px solid var(--color-border-subtle);
  --border-default: 1px solid var(--color-border-default);
  --border-selected: 2px solid var(--color-border-brand);

  /* Shadows — soft, low-contrast, brand-tinted. No hard/dark drop shadows. */
  --shadow-xs: 0 2px 5px 0 rgba(109, 40, 217, 0.12);
  --shadow-sm: 0 2px 10px 0 rgba(31, 27, 46, 0.06);
  --shadow-md: 0 6px 20px 0 rgba(109, 40, 217, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(31, 27, 46, 0.14);
  --shadow-xl: 0 12px 32px 0 rgba(31, 27, 46, 0.1);
  --shadow-button: 0 4px 10px 0 rgba(109, 40, 217, 0.35);
  --shadow-success-ring: 0 0 0 4px rgba(21, 128, 61, 0.08);

  /* Motion — subtle, functional only. No bounces, no decorative looping animation. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}