/* ============================================================
   COMMERCEPLUS — Design Tokens: Color & Type
   Dark-first, premium SaaS for marketplace integration.
   Base #0A0A0A · Primary orange #FF6B00 · White contrast.
   ============================================================ */

/* ---- Fonts: carregadas via <link rel="preconnect"> + <link> em BaseLayout.astro ---- */

:root,
html[data-theme='dark'] {
  /* ========== BRAND CORE ========== */
  --cp-orange:        #FF6B00;   /* primary action / highlight */
  --cp-orange-logo:   #FF6600;   /* exact logo orange */
  --cp-black:         #0A0A0A;   /* base canvas */
  --cp-ink:           #050505;   /* logo wordmark black */
  --cp-white:         #FFFFFF;

  /* ========== ORANGE SCALE ========== */
  --orange-50:   #FFF1E6;
  --orange-100:  #FFE0C7;
  --orange-200:  #FFC18F;
  --orange-300:  #FFA257;
  --orange-400:  #FF861F;
  --orange-500:  #FF6B00;   /* primary */
  --orange-600:  #E65F00;
  --orange-700:  #BF4F00;
  --orange-800:  #993F00;
  --orange-900:  #663000;

  /* ========== NEUTRAL / SURFACE (dark) ========== */
  --bg-base:     #0A0A0A;   /* app canvas */
  --bg-1:        #111111;   /* panels, cards */
  --bg-2:        #171717;   /* elevated cards */
  --bg-3:        #1F1F1F;   /* overlays, menus, inputs */
  --bg-4:        #2A2A2A;   /* hover surface */

  /* hairlines & strokes (alpha over dark) */
  --border-subtle:  rgba(255,255,255,0.06);
  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --border-orange:  rgba(255,107,0,0.45);

  /* ========== TEXT (on dark) ========== */
  --fg1:  #FAFAFA;                    /* primary text */
  --fg2:  rgba(255,255,255,0.66);     /* secondary */
  --fg3:  rgba(255,255,255,0.44);     /* muted / captions */
  --fg4:  rgba(255,255,255,0.28);     /* disabled / placeholder */
  --fg-on-orange: #0A0A0A;            /* text on orange fills */

  /* ========== SEMANTIC ========== */
  --success:     #2ED673;
  --success-bg:  rgba(46,214,115,0.12);
  --warning:     #FFB020;
  --warning-bg:  rgba(255,176,32,0.12);
  --danger:      #FF4D4D;
  --danger-bg:   rgba(255,77,77,0.12);
  --info:        #4D94FF;
  --info-bg:     rgba(77,148,255,0.12);

  /* ========== LIGHT SURFACES (for white website sections) ========== */
  --light-bg:        #FFFFFF;
  --light-bg-1:      #F7F6F4;
  --light-border:    rgba(10,10,10,0.10);
  --light-fg1:       #0A0A0A;
  --light-fg2:       rgba(10,10,10,0.62);
  --light-fg3:       rgba(10,10,10,0.40);

  /* ========== GRADIENTS & GLOW (premium tech accents) ========== */
  --grad-orange:     linear-gradient(135deg, #FF861F 0%, #FF6B00 55%, #E65F00 100%); /* @kind color */
  --grad-ember:      linear-gradient(180deg, #FF6B00 0%, #BF4F00 100%); /* @kind color */
  --grad-surface:    linear-gradient(180deg, #171717 0%, #0E0E0E 100%);
  --grad-spotlight:  radial-gradient(120% 120% at 50% 0%, rgba(255,107,0,0.18) 0%, rgba(255,107,0,0) 60%); /* @kind color */
  --grad-hairline:   linear-gradient(90deg, rgba(255,107,0,0) 0%, rgba(255,107,0,0.6) 50%, rgba(255,107,0,0) 100%); /* @kind color */
  --glow-orange:     0 0 0 1px rgba(255,107,0,0.30), 0 8px 30px -6px rgba(255,107,0,0.45);
  --glow-orange-sm:  0 4px 16px -4px rgba(255,107,0,0.50);

  /* ========== ELEVATION (shadows on dark) ========== */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 6px 20px -6px rgba(0,0,0,0.55);
  --shadow-lg:  0 18px 48px -12px rgba(0,0,0,0.70);
  --shadow-xl:  0 32px 80px -16px rgba(0,0,0,0.80);
  /* inner top highlight that sells the "premium glass" panel look */
  --inset-hi:   inset 0 1px 0 rgba(255,255,255,0.05);

  /* ========== RADII ========== */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ========== SPACING (4px base) ========== */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ========== TYPE FAMILIES ========== */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ========== TYPE SCALE (fluid) ========== */
  --t-display:  clamp(48px, 6vw, 84px); /* @kind spacing */
  --t-h1:       clamp(36px, 4.4vw, 60px); /* @kind spacing */
  --t-h2:       clamp(28px, 3vw, 40px); /* @kind spacing */
  --t-h3:       24px;
  --t-h4:       19px;
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-body-sm:  14px;
  --t-caption:  13px;
  --t-overline: 12px;

  /* ========== THEME-AWARE PURPOSE TOKENS (dark values) ========== */
  /* substituem cores escuras antes hardcoded nos componentes;
     o bloco html[data-theme='light'] sobrescreve os equivalentes claros. */
  --nav-bg:            rgba(14,14,14,0.72);   /* header flutuante (scrolled) */
  --nav-dropdown-bg:   rgba(14,14,14,0.92);   /* dropdown mobile do nav */
  --scrim:             rgba(0,0,0,0.5);       /* backdrops / overlays de modal */
  --card-glass:        rgba(20,20,20,0.55);   /* cards glass (Features/Trust) */
  --panel-dot:         rgba(255,255,255,0.22);/* dots do carrossel de painel */
  --panel-dot-hover:   rgba(255,255,255,0.42);
  /* Hero (vídeo sobre gradiente) */
  --hero-grad:         linear-gradient(180deg, rgba(14,14,14,0) 0%, rgba(14,14,14,0.85) 50%, var(--bg-base) 100%); /* @kind color */
  --hero-overlay:      rgba(10,10,10,0.25);
  --hero-overlay-top:  linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0) 100%); /* @kind color */
  --hero-badge-bg:     rgba(23,23,23,0.7);
  --hero-video-opacity:    0.9;
  --hero-video-brightness: 0.85;
  --hero-amber-overlay:    transparent;
}

/* ============================================================
   TEMA CLARO — sobrescreve os tokens semânticos.
   Laranja da marca, glows e tints semânticos permanecem.
   ============================================================ */
html[data-theme='light'] {
  /* ========== NEUTRAL / SURFACE (light) ========== */
  --bg-base:     #F7F6F4;   /* canvas claro */
  --bg-1:        #FFFFFF;   /* panels, cards */
  --bg-2:        #FFFFFF;   /* elevated cards */
  --bg-3:        #F0EEEB;   /* overlays, menus, inputs */
  --bg-4:        #E6E3DF;   /* hover surface */

  /* hairlines & strokes (alpha sobre claro) */
  --border-subtle:  rgba(10,10,10,0.06);
  --border:         rgba(10,10,10,0.10);
  --border-strong:  rgba(10,10,10,0.16);
  /* --border-orange permanece */

  /* ========== TEXT (on light) ========== */
  --fg1:  #0A0A0A;                  /* primary text */
  --fg2:  rgba(10,10,10,0.66);      /* secondary */
  --fg3:  rgba(10,10,10,0.44);      /* muted / captions */
  --fg4:  rgba(10,10,10,0.28);      /* disabled / placeholder */
  /* --fg-on-orange permanece #0A0A0A (texto sobre laranja) */

  /* ========== GRADIENTS & ELEVATION (light) ========== */
  --grad-surface:  linear-gradient(180deg, #FFFFFF 0%, #F4F2EF 100%);
  /* --grad-orange / --grad-ember / --grad-spotlight / --grad-hairline permanecem */

  --shadow-sm:  0 1px 2px rgba(19,23,32,0.08);
  --shadow-md:  0 6px 20px -6px rgba(19,23,32,0.14);
  --shadow-lg:  0 18px 48px -12px rgba(19,23,32,0.18);
  --shadow-xl:  0 32px 80px -16px rgba(19,23,32,0.22);
  /* sem realce branco no topo dos cards no tema claro (evita a linha de 1px);
     transparente em vez de 'none' para manter listas como "var(--shadow-lg), var(--inset-hi)" válidas */
  --inset-hi:   inset 0 1px 0 rgba(255,255,255,0);

  /* ========== PURPOSE TOKENS (light) ========== */
  --nav-bg:            rgba(255,255,255,0.72);
  --nav-dropdown-bg:   rgba(255,255,255,0.94);
  --scrim:             rgba(10,10,10,0.35);
  --card-glass:        rgba(255,255,255,0.70);
  --panel-dot:         rgba(10,10,10,0.18);
  --panel-dot-hover:   rgba(10,10,10,0.38);
  --hero-grad:         linear-gradient(180deg, rgba(244,242,239,0) 0%, rgba(244,242,239,0.8) 50%, var(--bg-base) 100%); /* @kind color */
  --hero-overlay:      rgba(247,246,244,0.22);
  --hero-overlay-top:  linear-gradient(180deg, rgba(247,246,244,0.65) 0%, rgba(247,246,244,0) 100%); /* @kind color */
  --hero-badge-bg:     rgba(255,255,255,0.72);
  --hero-video-opacity:    0.82;
  --hero-video-brightness: 0.85;
  --hero-amber-overlay:    rgba(255,107,0,0.07);
}

/* ---- Troca de logo conforme o tema (clara para fundo escuro, escura para claro) ---- */
html[data-theme='dark'] .cp-logo-dark { display: none; }
html[data-theme='light'] .cp-logo-light { display: none; }

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.cp-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg1);
  text-wrap: balance;
}
.cp-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg1);
  text-wrap: balance;
}
.cp-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}
.cp-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.cp-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.cp-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--fg2);
}
.cp-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg2);
}
.cp-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.55;
  color: var(--fg2);
}
.cp-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg3);
}
.cp-overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-overline);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-400);
}
.cp-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body-sm);
  letter-spacing: -0.01em;
  color: var(--fg1);
}

/* utility: gradient orange text for hero emphasis */
.cp-grad-text {
  background: var(--grad-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}