/* ============================================================
   WoChat — Design Tokens v1.0
   Single source of truth: import this file before anything else.
   ============================================================ */

:root {
  /* ---- BRAND · NAVY (primary) ---- */
  --wc-navy-50:  #EEF2F8;
  --wc-navy-100: #D6DEEC;
  --wc-navy-200: #A8B7D2;
  --wc-navy-300: #6F84AB;
  --wc-navy-400: #3F5681;
  --wc-navy-500: #1B365D;   /* ★ primary */
  --wc-navy-600: #152A49;   /* hover */
  --wc-navy-700: #0F1F37;
  --wc-navy-800: #0A1525;
  --wc-navy-900: #050A14;

  /* ---- BRAND · AMBER (accent) ---- */
  --wc-amber-50:  #FFF7E6;
  --wc-amber-100: #FCEBC0;
  --wc-amber-200: #F8D381;
  --wc-amber-300: #F4B547;
  --wc-amber-400: #F39C2D;  /* ★ accent */
  --wc-amber-500: #D97F12;
  --wc-amber-600: #A85D08;

  /* ---- NEUTRALS · INK (cool greys) ---- */
  --wc-paper:    #FFFFFF;
  --wc-ink-50:   #F7F8FB;
  --wc-ink-100:  #EDF0F4;
  --wc-ink-200:  #D9DEE6;
  --wc-ink-300:  #B5BCC8;
  --wc-ink-400:  #7E8898;
  --wc-ink-500:  #5A6577;
  --wc-ink-700:  #2A3447;
  --wc-ink-900:  #0E1421;

  /* ---- CHANNEL & SEMANTIC ---- */
  --wc-whatsapp: #25D366;
  --wc-whatsapp-dark: #128C7E;
  --wc-instagram: #E1306C;
  --wc-telegram: #26A5E4;
  --wc-messenger: #0084FF;
  --wc-success:  #25D366;
  --wc-info:     #3B82F6;
  --wc-warning:  #F39C2D;
  --wc-danger:   #EF4444;

  /* ---- SEMANTIC ALIASES ---- */
  --wc-bg-page:        var(--wc-paper);
  --wc-bg-muted:       var(--wc-ink-50);
  --wc-bg-inverted:    var(--wc-navy-500);
  --wc-text-primary:   var(--wc-ink-900);
  --wc-text-body:      var(--wc-ink-700);
  --wc-text-muted:     var(--wc-ink-500);
  --wc-text-faint:     var(--wc-ink-400);
  --wc-text-on-dark:   var(--wc-paper);
  --wc-border-default: var(--wc-ink-200);
  --wc-border-strong:  var(--wc-ink-300);
  --wc-brand-primary:  var(--wc-navy-500);
  --wc-brand-primary-hover: var(--wc-navy-600);
  --wc-brand-accent:   var(--wc-amber-400);

  /* ---- TYPOGRAPHY ---- */
  --wc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wc-text-xs:   0.75rem;     /* 12 */
  --wc-text-sm:   0.8125rem;   /* 13 */
  --wc-text-base: 0.9375rem;   /* 15 */
  --wc-text-lg:   1.125rem;    /* 18 */
  --wc-text-xl:   1.375rem;    /* 22 */
  --wc-text-2xl:  1.875rem;    /* 30 */
  --wc-text-3xl:  2.5rem;      /* 40 */
  --wc-text-4xl:  3.5rem;      /* 56 */

  --wc-leading-tight:   1.08;
  --wc-leading-snug:    1.25;
  --wc-leading-normal:  1.55;
  --wc-leading-relaxed: 1.65;

  --wc-tracking-tight:    -0.025em;
  --wc-tracking-normal:    0;
  --wc-tracking-wide:      0.06em;
  --wc-tracking-wider:     0.14em;
  --wc-tracking-widest:    0.18em;

  /* ---- SPACING (multiples of 4) ---- */
  --wc-space-1:  0.25rem;   /* 4  */
  --wc-space-2:  0.5rem;    /* 8  */
  --wc-space-3:  0.75rem;   /* 12 */
  --wc-space-4:  1rem;      /* 16 */
  --wc-space-6:  1.5rem;    /* 24 */
  --wc-space-8:  2rem;      /* 32 */
  --wc-space-12: 3rem;      /* 48 */
  --wc-space-16: 4rem;      /* 64 */
  --wc-space-24: 6rem;      /* 96 */

  /* ---- RADIUS ---- */
  --wc-radius-xs:  6px;
  --wc-radius-sm:  10px;
  --wc-radius-md:  14px;
  --wc-radius-lg:  20px;
  --wc-radius-xl:  28px;
  --wc-radius-2xl: 36px;
  --wc-radius-pill: 9999px;

  /* ---- SHADOW ---- */
  --wc-shadow-xs: 0 1px 2px rgba(15,31,55,.06);
  --wc-shadow-sm: 0 2px 6px rgba(15,31,55,.06), 0 1px 2px rgba(15,31,55,.04);
  --wc-shadow-md: 0 8px 22px rgba(15,31,55,.08), 0 2px 6px rgba(15,31,55,.05);
  --wc-shadow-lg: 0 22px 50px rgba(15,31,55,.12), 0 6px 14px rgba(15,31,55,.06);
  --wc-shadow-brand: 0 22px 50px rgba(27,54,93,.22);

  /* ---- TRANSITIONS ---- */
  --wc-ease-out: cubic-bezier(.2,.7,.2,1);
  --wc-dur-fast: 150ms;
  --wc-dur-base: 250ms;
  --wc-dur-slow: 500ms;
}

/* ============================================================
   BASE LAYER
   ============================================================ */
html, body {
  font-family: var(--wc-font-sans);
  color: var(--wc-text-primary);
  background: var(--wc-bg-page);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--wc-ink-100); }
::-webkit-scrollbar-thumb { background: var(--wc-navy-500); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--wc-navy-600); }

/* ============================================================
   COMPONENT LAYER (semantic class API)
   Use alongside Tailwind utilities. These wrap repeating patterns.
   ============================================================ */

/* ---- Buttons ---- */
.wc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.375rem;
  font-family: var(--wc-font-sans);
  font-weight: 700; font-size: var(--wc-text-base);
  border-radius: var(--wc-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--wc-dur-base) var(--wc-ease-out),
              color var(--wc-dur-base) var(--wc-ease-out),
              transform var(--wc-dur-base) var(--wc-ease-out),
              box-shadow var(--wc-dur-base) var(--wc-ease-out);
}
.wc-btn:disabled { opacity: .5; cursor: not-allowed; }

.wc-btn-primary { background: var(--wc-brand-primary); color: var(--wc-text-on-dark); box-shadow: var(--wc-shadow-brand); }
.wc-btn-primary:hover { background: var(--wc-brand-primary-hover); transform: translateY(-1px); }

.wc-btn-accent { background: var(--wc-brand-accent); color: var(--wc-navy-700); }
.wc-btn-accent:hover { background: var(--wc-amber-300); transform: translateY(-1px); }

.wc-btn-ghost { background: transparent; color: var(--wc-brand-primary); border-color: var(--wc-border-default); }
.wc-btn-ghost:hover { border-color: var(--wc-brand-primary); background: var(--wc-bg-muted); }

.wc-btn-whatsapp { background: var(--wc-whatsapp); color: white; }
.wc-btn-whatsapp:hover { background: var(--wc-whatsapp-dark); transform: translateY(-1px); }

.wc-btn-on-dark { background: rgba(255,255,255,.1); color: white; border-color: rgba(255,255,255,.2); }
.wc-btn-on-dark:hover { background: rgba(255,255,255,.2); }

.wc-btn-lg { padding: 1rem 1.75rem; font-size: 1rem; border-radius: var(--wc-radius-lg); }
.wc-btn-sm { padding: .5rem .875rem; font-size: var(--wc-text-sm); }

/* ---- Badges ---- */
.wc-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .75rem;
  border-radius: var(--wc-radius-pill);
  font-size: var(--wc-text-xs);
  font-weight: 600;
}
.wc-badge-popular { background: var(--wc-amber-400); color: var(--wc-navy-700); }
.wc-badge-success { background: rgba(37,211,102,.12); color: #0E7A3C; }
.wc-badge-info    { background: var(--wc-navy-50); color: var(--wc-navy-500); }

/* ---- Cards ---- */
.wc-card {
  background: var(--wc-paper);
  border: 1px solid var(--wc-border-default);
  border-radius: var(--wc-radius-xl);
  padding: var(--wc-space-8);
  transition: box-shadow var(--wc-dur-base) var(--wc-ease-out),
              transform var(--wc-dur-base) var(--wc-ease-out),
              border-color var(--wc-dur-base) var(--wc-ease-out);
}
.wc-card:hover { box-shadow: var(--wc-shadow-md); }
.wc-card-inverted { background: var(--wc-navy-500); border-color: var(--wc-navy-500); color: white; }

/* ---- Feature card icon ---- */
.wc-feat-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--wc-radius-md);
  background: var(--wc-navy-50);
  color: var(--wc-navy-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
}
.wc-feat-icon-amber { background: var(--wc-amber-50); color: var(--wc-amber-500); }
.wc-feat-icon-green { background: rgba(37,211,102,.12); color: var(--wc-whatsapp); }

/* ---- Toggle (period) ---- */
.wc-toggle {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--wc-ink-100);
  border-radius: var(--wc-radius-md);
}
.wc-toggle button {
  appearance: none; border: 0; cursor: pointer;
  padding: .625rem 1.375rem;
  font-family: var(--wc-font-sans); font-weight: 700; font-size: var(--wc-text-sm);
  color: var(--wc-text-muted);
  background: transparent;
  border-radius: 10px;
  transition: background var(--wc-dur-fast), color var(--wc-dur-fast);
}
.wc-toggle button.is-active { background: var(--wc-navy-500); color: white; box-shadow: var(--wc-shadow-sm); }

/* ---- Eyebrow text ---- */
.wc-eyebrow {
  font-family: var(--wc-font-mono);
  font-size: var(--wc-text-xs);
  font-weight: 600;
  letter-spacing: var(--wc-tracking-widest);
  text-transform: uppercase;
  color: var(--wc-amber-500);
}

/* ---- Status pulse dot ---- */
.wc-pulse {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wc-navy-500);
}
.wc-pulse::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--wc-navy-500);
  opacity: .75; animation: wc-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes wc-ping {
  0%   { transform: scale(1); opacity: .75; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ---- Pricing card ---- */
.wc-price {
  background: var(--wc-paper);
  border: 1px solid var(--wc-border-default);
  border-radius: var(--wc-radius-xl);
  padding: var(--wc-space-8);
  display: flex; flex-direction: column;
  transition: box-shadow var(--wc-dur-base) var(--wc-ease-out),
              transform var(--wc-dur-base) var(--wc-ease-out);
  min-height: 650px;
  position: relative;
  overflow: hidden;
}
.wc-price:hover { box-shadow: var(--wc-shadow-lg); }
.wc-price.is-featured { background: var(--wc-navy-500); color: white; border-color: var(--wc-navy-500); box-shadow: var(--wc-shadow-brand); }

/* ---- Channel chip ---- */
.wc-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-paper);
  border: 1px solid var(--wc-border-default);
  font-size: var(--wc-text-sm);
  font-weight: 600;
  color: var(--wc-ink-700);
}