/* ============================================================
   Emotize Design System — Foundations
   Colors + Type tokens, both base and semantic.
   Source: emotize-site (Vite + Tailwind), brand consolidated.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand Color Tokens ---------- */
  --emz-navy:       #14254A;   /* Primary brand surface (deployed in Tailwind). Trust, depth. Text + dark surfaces. */
  --emz-navy-2:     #1E3A75;   /* Navy gradient stop / hover */
  --emz-navy-deep:  #0B1730;   /* Deepest surface, footer, immersive sections */
  --emz-navy-wordmark: #243356; /* Wordmark navy — exact color used inside all product logo SVGs (slightly grayer than --emz-navy). Use only when matching logo strokes/text. */

  --emz-cyan:       #3DB7C2;   /* Accent. Innovation, calm, CTAs */
  --emz-cyan-soft:  #7BC1CC;   /* Logo dot (master logo_emotize.svg) */
  --emz-cyan-deep:  #2A9BA5;   /* Cyan gradient stop / hover */

  --emz-dark:       #3F4A5C;   /* Neutral 800 — secondary text */
  --emz-medium:     #6B7785;   /* Neutral 500 — muted text, placeholders */
  --emz-light:      #E8ECF1;   /* Neutral 200 — borders, dividers, inputs */
  --emz-offwhite:   #F4F7FA;   /* Page bg */
  --emz-white:      #FFFFFF;

  /* ---------- Semantic Feedback ---------- */
  --emz-success:    #16A34A;
  --emz-success-bg: #F0FDF4;
  --emz-success-bd: #DCFCE7;

  --emz-warning:    #B45309;
  --emz-warning-bg: #FEFCE8;
  --emz-warning-bd: #FEF3C7;

  --emz-critical:    #DC2626;
  --emz-critical-bg: #FEF2F2;
  --emz-critical-bd: #FEE2E2;

  --emz-notice:    #2563EB;
  --emz-notice-bg: #EFF6FF;
  --emz-notice-bd: #DBEAFE;

  /* ---------- Semantic Surface Roles ---------- */
  --fg-1:        var(--emz-navy);     /* primary text */
  --fg-2:        var(--emz-dark);     /* secondary text */
  --fg-3:        var(--emz-medium);   /* tertiary / captions */
  --fg-inverse:  var(--emz-white);

  --bg-page:     var(--emz-offwhite);
  --bg-surface:  var(--emz-white);
  --bg-sunken:   var(--emz-light);
  --bg-deep:     var(--emz-navy);

  --border-1:    var(--emz-light);
  --border-2:    rgba(20, 37, 74, 0.08);
  --border-accent: rgba(61, 183, 194, 0.4);

  --accent:       var(--emz-cyan);
  --accent-hover: var(--emz-cyan-deep);

  /* ---------- Gradients ---------- */
  --grad-brand:   linear-gradient(135deg, #14254A 0%, #3DB7C2 100%);
  --grad-navy:    linear-gradient(135deg, #14254A 0%, #1E3A75 100%);
  --grad-cyan:    linear-gradient(135deg, #3DB7C2 0%, #2A9BA5 100%);
  --grad-aura:    radial-gradient(circle, rgba(61,183,194,0.15) 0%, rgba(20,37,74,0) 70%);

  /* ---------- Product Accents ----------
     Extracted directly from each product's logo SVG/webp.
     All product logos share the same wordmark navy (--emz-navy-wordmark #243356);
     each product has its own accent for the dot / icon. */
  --prod-play:           #4BC3CE;   /* play.emotize — teal cyan */
  --prod-app:            #62AECA;   /* emotize.app — soft sky blue */
  --prod-tizee:          #62AECA;   /* tizee.ai — same soft sky blue as app */
  --prod-business:       #49CCCE;   /* emotize.business — bright teal */
  --prod-experience:     #E08A77;   /* emotize.experience — warm coral */
  --prod-tech:           #7D36DF;   /* emotize.tech — vivid violet */
  --prod-tech-shade:     #172F51;   /* emotize.tech secondary — deep navy shade */

  /* ---------- Type Families ---------- */
  --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type Scale (px) ---------- */
  --fs-display:  72px;
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-h5:       18px;
  --fs-h6:       16px;
  --fs-lg:       18px;
  --fs-base:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-2xs:      10px;

  /* ---------- Weight ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ---------- Line Height ---------- */
  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.5;
  --lh-loose:   1.6;

  /* ---------- Tracking ---------- */
  --track-tightest: -0.03em;
  --track-tighter:  -0.02em;
  --track-tight:    -0.01em;
  --track-normal:    0em;
  --track-wide:      0.05em;
  --track-wider:     0.1em;
  --track-widest:    0.15em;

  /* ---------- 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;

  /* ---------- Radius ---------- */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  9999px;

  /* ---------- Shadows ---------- */
  --sh-sm:    0 1px 2px 0 rgba(20, 37, 74, 0.04);
  --sh-md:    0 4px 12px -2px rgba(20, 37, 74, 0.06), 0 2px 4px -2px rgba(20, 37, 74, 0.04);
  --sh-lg:    0 10px 30px -10px rgba(20, 37, 74, 0.15);
  --sh-xl:    0 20px 50px -15px rgba(20, 37, 74, 0.2);
  --sh-glass: 0 8px 32px 0 rgba(20, 37, 74, 0.05);
  --sh-glow-cyan: 0 4px 14px 0 rgba(61, 183, 194, 0.39);
  --sh-glow-cyan-strong: 0 6px 20px rgba(61, 183, 194, 0.4);
  --sh-inner: inset 0 1px 2px 0 rgba(20, 37, 74, 0.04);

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* signature easing */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      600ms;
  --dur-reveal:    800ms;
}

/* ============================================================
   Base + Semantic typographic styles
   Use these classes directly: <h1 class="emz-h1">…</h1>
   ============================================================ */

.emz-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  color: var(--fg-1);
}

.emz-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  color: var(--fg-1);
}

.emz-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.emz-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--fg-1);
}

.emz-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.emz-h5 {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.emz-h6 {
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

.emz-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.emz-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.emz-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.emz-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.emz-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.emz-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--fg-3);
}

.emz-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}