@import url("fonts.css");

:root {
  /* Outback 26.35 visual identity */
  --color-rose: #ce1b82;
  --color-rose-strong: #ce1b82;
  --color-purple: #53317c;
  --color-purple-strong: #6a2986;
  --color-yellow: #f2b71e;
  --color-outback-wine: #922226;
  --color-outback-wine-dark: #6c1a0e;
  --color-outback-cream: #faf2c9;
  --color-outback-red: #d9012f;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #f2eef8;
  --color-gray-dark: #3c2d56;

  --color-primary: var(--color-yellow);
  --color-primary-hover: #d49b11;
  --color-primary-dark: var(--color-purple);
  --color-fire: var(--color-outback-red);
  --color-gold: var(--color-yellow);
  --color-gold-soft: #f9cf66;
  --color-lime: #f2b71e;
  --color-lime-alt: rgba(242, 183, 30, 0.9);

  --color-surface: rgba(255, 255, 255, 0.1);
  --color-surface-strong: rgba(255, 255, 255, 0.16);
  --color-card-bg: #ffffff;
  --color-border: rgba(255, 255, 255, 0.24);
  --color-text: #ffffff;
  --color-text-muted: #f0dff8;
  --color-text-soft: #ccb0dd;
  --color-text-dark: #321c48;
  --color-input-bg: #ffffff;
  --color-error: #d71414;
  --color-error-soft: #fe4b4b;
  --color-success: #1cb111;
  --color-success-soft: #5dd879;
  --color-btn-disabled: #8f78a8;
  --color-btn-disabled-text: rgba(255, 255, 255, 0.56);

  --font-heading: "Veneer", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --font-display: var(--font-heading);
  --font-script: "Have Heart One", cursive;
  --font-heading-clean: "Veneer Clean", "Archivo", sans-serif;

  --radius-sm: 8px;
  --radius-btn: 0.6rem;
  --radius-card: 22px;
  --radius-input: 0.5rem;
  --radius-modal: 24px;
  --radius-pill: 999px;

  /* Botão padrão (layout do FAB) */
  --btn-min-height: 5.28rem;
  --btn-padding-x: 3.6rem;
  --btn-font-size: 2.04rem;
  --btn-font-weight: 800;
  --btn-letter-spacing: 0.02em;
  --btn-line-height: 1;
  /* Tabs / subtabs — mesmo layout do FAB */
  --btn-tab-min-height: var(--btn-min-height);
  --btn-tab-padding-x: var(--btn-padding-x);
  --btn-tab-font-size: var(--btn-font-size);
  --btn-subtab-min-height: var(--btn-min-height);
  --btn-subtab-font-size: var(--btn-font-size);
  --shadow-btn-rose:
    0 0 14px rgba(206, 27, 130, 0.4),
    0 10px 24px rgba(28, 8, 35, 0.22);
  --shadow-btn-rose-hover:
    0 0 22px rgba(206, 27, 130, 0.55),
    0 14px 32px rgba(28, 8, 35, 0.26);
  --shadow-btn-yellow:
    0 0 14px rgba(242, 183, 30, 0.4),
    0 10px 24px rgba(28, 8, 35, 0.22);
  --shadow-btn-yellow-hover:
    0 0 22px rgba(242, 183, 30, 0.55),
    0 14px 32px rgba(28, 8, 35, 0.26);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --header-offset-top: 3rem;
  --header-h: 65px;
  --wc-menu-h: 67px;
  --promo-encerrada-h: 0px;
  --countdown-h: 0px;
  /* Header flutuante + countdown (quando expandido) + faixa encerrada */
  --hero-stack-h: calc(var(--header-offset-top) + var(--header-h) + var(--countdown-h, 0px) + var(--promo-encerrada-h, 0px));
  --outback-bp-mobile: 991px;

  --outback-asset-kv: url("../assets/outback/bkg/bkg1.webp");
  --outback-asset-kv-mobile: url("../assets/outback/bkg/bkg1.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 24px 64px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 14px 44px rgba(34, 3, 47, 0.42);
  --glow-mint: 0 0 28px rgba(255, 37, 137, 0.34);
  --glow-teal: 0 0 28px rgba(145, 55, 218, 0.35);
  --glow-accent: var(--glow-mint);
  --glow-red: 0 0 28px rgba(217, 1, 47, 0.34);
  --glow-fire: var(--glow-teal);
  --glow-gold: 0 0 24px rgba(242, 183, 30, 0.4);

  --gradient-page: linear-gradient(145deg, #3f2059 0%, #5d3384 45%, #d32f83 100%);
  --gradient-brand: linear-gradient(135deg, #ce1b82 0%, #7c3ca8 55%, #3f2059 100%);
  --gradient-fire: linear-gradient(135deg, #f2b71e 0%, #f59f0f 100%);
  --gradient-hero-overlay: linear-gradient(to left, rgba(43, 21, 66, 0.82) 0%, rgba(130, 42, 125, 0.34) 45%, transparent 70%);

  /* Fenix legado + aliases */
  --c-orange1: var(--color-primary);
  --c-orange2: var(--color-primary);
  --c-orange3: var(--color-primary-dark);
  --c-teal1: var(--color-rose);
  --c-teal2: var(--color-purple);
  --c-teal3: var(--color-purple-strong);
  --c-teal4: var(--color-purple);
  --c-teal7: var(--color-rose-strong);
  --c-red1: var(--color-outback-red);
  --c-red2: var(--color-outback-red);
  --c-maroon1: var(--color-outback-wine);
  --c-maroon2: var(--color-outback-wine-dark);
  --c-wine: var(--color-black);
  --c-blue1: #6a2986;
  --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: #3e305a;
  --c-blackform: #6c757d;
  --c-gray: #f2eef8;
  --c-gray2: #e5d5f2;
  --c-graydark: #4f4164;
  --c-check: var(--color-success);
  --c-error: var(--color-error);
  --c-error1: var(--color-error);
  --c-error2: var(--color-error-soft);
  --c-offwhite: #faf2c9;
  --c-yellow1: #f2b71e;
  --c-purple1: #6a2986;
}
