/* ============================================================
   TOKENS — AC7 Studio
   Cores, tipografia, espaçamento, sombras
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ---------- Light mode (default) ---------- */
:root {
  /* Brand */
  --color-brand:         #002fff;
  --color-brand-dark:    #001fd4;
  --color-brand-soft:    #5580ff;
  --color-brand-light:   #e8edff;
  --color-brand-glow:    rgba(0, 47, 255, 0.18);
  --color-whatsapp:      #25d366;
  --color-whatsapp-dark: #1ebe5d;
  --color-link-on-dark:  #7fa8ff;
  --color-contrast:      #ffff00;

  /* Color channels */
  --rgb-brand:           0, 47, 255;
  --rgb-brand-soft:      85, 128, 255;
  --rgb-white:           255, 255, 255;
  --rgb-black:           0, 0, 0;
  --rgb-hero:            1, 12, 46;
  --rgb-whatsapp:        37, 211, 102;
  --rgb-contrast:        255, 255, 0;
  --rgb-profile-business-light: 143, 170, 255;

  /* Backgrounds */
  --bg-page:             #f8faff;
  --bg-surface:          #ffffff;
  --bg-surface-2:        #f0f4ff;
  --bg-hero:             #010c2e;
  --bg-section-alt:      #f0f4ff;

  /* Text */
  --text-primary:        #0a0f2e;
  --text-secondary:      #3a4060;
  --text-muted:          #6b728e;
  --text-inverse:        #ffffff;
  --text-brand:          #002fff;
  --text-on-brand:       #ffffff;
  --text-on-contrast:    #000000;

  /* Borders */
  --border-default:      rgba(0, 47, 255, 0.12);
  --border-strong:       rgba(0, 47, 255, 0.3);

  /* Component overlays */
  --overlay-white-06: rgba(var(--rgb-white), 0.06);
  --overlay-white-08: rgba(var(--rgb-white), 0.08);
  --overlay-white-10: rgba(var(--rgb-white), 0.10);
  --overlay-white-12: rgba(var(--rgb-white), 0.12);
  --overlay-white-15: rgba(var(--rgb-white), 0.15);
  --overlay-white-16: rgba(var(--rgb-white), 0.16);
  --overlay-white-18: rgba(var(--rgb-white), 0.18);
  --overlay-white-20: rgba(var(--rgb-white), 0.20);
  --overlay-white-30: rgba(var(--rgb-white), 0.30);
  --overlay-white-40: rgba(var(--rgb-white), 0.40);
  --overlay-white-50: rgba(var(--rgb-white), 0.50);
  --overlay-white-55: rgba(var(--rgb-white), 0.55);
  --overlay-white-60: rgba(var(--rgb-white), 0.60);
  --overlay-white-62: rgba(var(--rgb-white), 0.62);
  --overlay-white-65: rgba(var(--rgb-white), 0.65);
  --overlay-white-72: rgba(var(--rgb-white), 0.72);
  --overlay-white-80: rgba(var(--rgb-white), 0.80);
  --overlay-white-88: rgba(var(--rgb-white), 0.88);
  --overlay-white-90: rgba(var(--rgb-white), 0.90);

  --overlay-black-04: rgba(var(--rgb-black), 0.04);
  --overlay-black-06: rgba(var(--rgb-black), 0.06);
  --overlay-black-08: rgba(var(--rgb-black), 0.08);
  --overlay-black-12: rgba(var(--rgb-black), 0.12);
  --overlay-black-15: rgba(var(--rgb-black), 0.15);
  --overlay-black-50: rgba(var(--rgb-black), 0.50);
  --overlay-black-55: rgba(var(--rgb-black), 0.55);

  --overlay-brand-03: rgba(var(--rgb-brand), 0.03);
  --overlay-brand-04: rgba(var(--rgb-brand), 0.04);
  --overlay-brand-05: rgba(var(--rgb-brand), 0.05);
  --overlay-brand-10: rgba(var(--rgb-brand), 0.10);
  --overlay-brand-12: rgba(var(--rgb-brand), 0.12);
  --overlay-brand-14: rgba(var(--rgb-brand), 0.14);
  --overlay-brand-18: rgba(var(--rgb-brand), 0.18);
  --overlay-brand-20: rgba(var(--rgb-brand), 0.20);
  --overlay-brand-22: rgba(var(--rgb-brand), 0.22);
  --overlay-brand-25: rgba(var(--rgb-brand), 0.25);
  --overlay-brand-35: rgba(var(--rgb-brand), 0.35);
  --overlay-brand-40: rgba(var(--rgb-brand), 0.40);
  --overlay-brand-42: rgba(var(--rgb-brand), 0.42);
  --overlay-brand-50: rgba(var(--rgb-brand), 0.50);

  --overlay-hero-10: rgba(var(--rgb-hero), 0.10);
  --overlay-hero-52: rgba(var(--rgb-hero), 0.52);
  --overlay-contrast-12: rgba(var(--rgb-contrast), 0.12);

  --shadow-button-brand: 0 4px 20px var(--overlay-brand-35);
  --shadow-button-brand-hover: 0 8px 32px var(--overlay-brand-50);
  --shadow-whatsapp: 0 4px 20px rgba(var(--rgb-whatsapp), 0.30);
  --shadow-whatsapp-hover: 0 8px 28px rgba(var(--rgb-whatsapp), 0.45);
  --shadow-card-hover: 0 20px 48px var(--overlay-brand-12), 0 4px 16px var(--overlay-black-06);
  --shadow-card-featured-hover: 0 20px 48px var(--overlay-brand-42), 0 4px 16px var(--overlay-black-12);
  --shadow-button-light-hover: 0 6px 20px var(--overlay-black-15);
  --shadow-cookie: 0 20px 60px var(--overlay-black-50);
  --shadow-theme-active: 0 2px 8px var(--overlay-brand-40);

  /* Package cards */
  --pkg-card-accent: var(--color-brand);
  --pkg-meta-bg: #e8f7ee;
  --pkg-meta-text: #007a3d;
  --pkg-featured-bg: var(--color-brand);
  --pkg-check-bg: var(--color-brand-light);
  --pkg-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002fff' stroke-width='2.8'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --pkg-check-featured-bg: var(--overlay-white-88);
  --pkg-check-featured-icon: var(--pkg-check-icon);
  --badge-best-seller-bg: #ffd84d;
  --badge-best-seller-text: #0a0f2e;
  --badge-complete-bg: #c9a13a;
  --badge-complete-text: #ffffff;
  --pkg-dark-bg: #0b0a07;
  --pkg-dark-border: #0b0a07;
  --pkg-dark-meta-bg: #063f2a;
  --pkg-dark-meta-text: #4ff0a4;
  --pkg-recurring-accent: #169b65;
  --pkg-recurring-accent-strong: #0d7f51;
  --pkg-recurring-bg: #06133d;
  --pkg-recurring-border: #0a1f63;
  --pkg-recurring-meta-bg: #063f2a;
  --pkg-recurring-meta-text: #7af0b2;
  --button-ink-bg: #0b0a07;
  --button-ink-text: #ffffff;
  --button-ink-hover-bg: #1d1b17;
  --pkg-business-surface: var(--profile-b-surface);
  --pkg-business-border: var(--profile-b-tag-bg);
  --pkg-business-accent: var(--profile-b-accent);
  --pkg-business-meta-bg: var(--profile-b-tag-bg);
  --pkg-business-meta-text: var(--profile-b-tag-text);
  --pkg-business-check-bg: var(--profile-b-tag-bg);
  --pkg-business-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23876f2c' stroke-width='2.8'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --pkg-premium-badge-bg: var(--color-brand);
  --pkg-premium-badge-text: var(--text-on-brand);

  /* Audience profiles */
  --profile-a-accent: var(--color-brand);
  --profile-a-surface: linear-gradient(135deg, var(--bg-surface), var(--color-brand-light));
  --profile-a-tag-bg: var(--overlay-brand-12);
  --profile-a-tag-text: var(--text-brand);
  --profile-b-accent: #876f2c;
  --profile-b-surface: linear-gradient(135deg, var(--bg-surface), rgba(135, 111, 44, 0.12));
  --profile-b-tag-bg: rgba(135, 111, 44, 0.14);
  --profile-b-tag-text: #876f2c;
  --keyword-bg: var(--overlay-white-62);

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,47,255,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 20px rgba(0,47,255,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(0,47,255,0.14), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 12px rgba(0,47,255,0.08);

  /* Nav */
  --nav-bg:              rgba(248,250,255,0.92);
  --nav-border:          rgba(0,47,255,0.1);

  /* Cookie / Banner */
  --cookie-bg:           #010c2e;
  --cookie-text:         #e8edff;

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill:9999px;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.5rem;
  --font-size-4xl:  3.25rem;
  --font-size-5xl:  4rem;
  --font-size-hero: clamp(2.5rem, 6vw, 5rem);

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  /* Transitions */
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  500ms;

  /* Layout */
  --container-max:     1440px;
  --container-narrow:  800px;
  --container-wide:    1600px;
  --container-px:      clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] {
  --bg-page:             #010c2e;
  --bg-surface:          #071040;
  --bg-surface-2:        #0a1550;
  --bg-hero:             #000820;
  --bg-section-alt:      #071040;

  --text-primary:        #eef1ff;
  --text-secondary:      #a8b4e8;
  --text-muted:          #6e7db0;
  --text-brand:          #5580ff;
  --text-on-brand:       #ffffff;

  --border-default:      rgba(100, 140, 255, 0.15);
  --border-strong:       rgba(100, 140, 255, 0.35);

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.3);

  --nav-bg:              rgba(1,12,46,0.95);
  --nav-border:          rgba(100,140,255,0.12);

  --color-brand-light:   rgba(0, 47, 255, 0.2);
  --color-brand-glow:    rgba(85, 128, 255, 0.22);

  --profile-a-surface: linear-gradient(135deg, var(--bg-surface), rgba(var(--rgb-brand-soft), 0.14));
  --profile-a-tag-bg: rgba(var(--rgb-brand-soft), 0.20);
  --profile-a-tag-text: #8faaff;
  --pkg-meta-bg: var(--overlay-white-12);
  --pkg-meta-text: var(--text-inverse);
  --pkg-check-bg: var(--overlay-brand-22);
  --badge-best-seller-bg: #ffd84d;
  --badge-best-seller-text: #0a0f2e;
  --badge-complete-bg: #c9a13a;
  --badge-complete-text: #ffffff;
  --pkg-dark-bg: #0b0a07;
  --pkg-dark-border: #0b0a07;
  --pkg-dark-meta-bg: #063f2a;
  --pkg-dark-meta-text: #4ff0a4;
  --pkg-recurring-accent: #36c889;
  --pkg-recurring-accent-strong: #169b65;
  --pkg-recurring-bg: #020a2a;
  --pkg-recurring-border: #12308c;
  --pkg-recurring-meta-bg: #063f2a;
  --pkg-recurring-meta-text: #7af0b2;
  --button-ink-bg: #ffffff;
  --button-ink-text: #0a0f2e;
  --button-ink-hover-bg: #e8edff;
  --pkg-business-surface: var(--profile-b-surface);
  --pkg-business-border: var(--profile-b-tag-bg);
  --pkg-business-accent: var(--profile-b-accent);
  --pkg-business-meta-bg: var(--profile-b-tag-bg);
  --pkg-business-meta-text: var(--profile-b-tag-text);
  --pkg-business-check-bg: var(--profile-b-tag-bg);
  --pkg-business-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6ad62' stroke-width='2.8'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --pkg-premium-badge-bg: var(--color-brand);
  --pkg-premium-badge-text: var(--text-on-brand);
  --profile-b-accent: #876f2c;
  --profile-b-surface: linear-gradient(135deg, var(--bg-surface), var(--overlay-hero-52));
  --profile-b-tag-bg: rgba(135, 111, 44, 0.2);
  --profile-b-tag-text: #c6ad62;
  --keyword-bg: var(--overlay-white-06);
}

/* ---------- High Contrast ---------- */
[data-theme="high-contrast"] {
  --bg-page:             #000000;
  --bg-surface:          #0a0a0a;
  --bg-surface-2:        #111111;
  --bg-hero:             #000000;
  --bg-section-alt:      #0a0a0a;

  --color-brand:         #ffff00;
  --color-brand-dark:    #ffdd00;
  --color-brand-light:   #333300;
  --color-brand-glow:    rgba(255,255,0,0.2);

  --text-primary:        #ffffff;
  --text-secondary:      #eeeeee;
  --text-muted:          #cccccc;
  --text-brand:          #ffff00;
  --text-inverse:        #ffffff;
  --text-on-brand:       #000000;
  --text-on-contrast:    #000000;

  --border-default:      rgba(255,255,255,0.4);
  --border-strong:       rgba(255,255,255,0.8);

  --nav-bg:              #000000;
  --nav-border:          rgba(255,255,255,0.5);

  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-card: 0 0 0 2px rgba(255,255,255,0.4);

  --cookie-bg:           #1a1a00;
  --cookie-text:         #ffff00;

  --pkg-meta-bg: var(--color-contrast);
  --pkg-meta-text: var(--text-on-contrast);
  --pkg-check-bg: var(--color-contrast);
  --pkg-check-icon: none;
  --pkg-check-featured-bg: var(--text-on-contrast);
  --pkg-check-featured-icon: none;
  --badge-best-seller-bg: var(--color-contrast);
  --badge-best-seller-text: var(--text-on-contrast);
  --badge-complete-bg: var(--color-contrast);
  --badge-complete-text: var(--text-on-contrast);
  --pkg-dark-bg: var(--bg-surface);
  --pkg-dark-border: var(--border-strong);
  --pkg-dark-meta-bg: var(--color-contrast);
  --pkg-dark-meta-text: var(--text-on-contrast);
  --pkg-recurring-accent: var(--color-contrast);
  --pkg-recurring-accent-strong: var(--color-brand-dark);
  --pkg-recurring-bg: var(--bg-surface);
  --pkg-recurring-border: var(--border-strong);
  --pkg-recurring-meta-bg: var(--color-contrast);
  --pkg-recurring-meta-text: var(--text-on-contrast);
  --button-ink-bg: var(--color-contrast);
  --button-ink-text: var(--text-on-contrast);
  --button-ink-hover-bg: var(--color-brand-dark);
  --pkg-business-surface: var(--profile-b-surface);
  --pkg-business-border: var(--profile-b-tag-bg);
  --pkg-business-accent: var(--profile-b-accent);
  --pkg-business-meta-bg: var(--profile-b-tag-bg);
  --pkg-business-meta-text: var(--profile-b-tag-text);
  --pkg-business-check-bg: var(--profile-b-tag-bg);
  --pkg-business-check-icon: none;
  --pkg-premium-badge-bg: var(--color-contrast);
  --pkg-premium-badge-text: var(--text-on-contrast);

  --profile-a-accent: var(--color-contrast);
  --profile-a-surface: var(--bg-surface);
  --profile-a-tag-bg: var(--color-contrast);
  --profile-a-tag-text: var(--text-on-contrast);
  --profile-b-accent: var(--color-contrast);
  --profile-b-surface: var(--bg-surface);
  --profile-b-tag-bg: var(--color-contrast);
  --profile-b-tag-text: var(--text-on-contrast);
  --keyword-bg: var(--bg-page);
}