/* ===========================================================================
   MOOZZ DESIGN SYSTEM -- colors_and_type.css
   The single source of color + type tokens for Moozz brand surfaces.
   Canonical lime is #C4FF6A (matches logo.svg, live moozz.com, Figma).
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* -- Brand lime (primary accent) ---------------------------- */
  --mz-lime:        #C4FF6A;   /* Canonical brand lime */
  --mz-lime-soft:   #D7FF95;   /* Hover / softer text on dark */
  --mz-lime-deep:   #8ABF37;   /* Gradient bottom, pressed */
  --mz-lime-ink:    #1a3300;   /* Text on lime fills */
  --mz-lime-tint:   rgba(196, 255, 106, 0.14);  /* Subtle bg wash */
  --mz-lime-glow:   rgba(196, 255, 106, 0.35);  /* Outer glow */
  --mz-lime-aurora: rgba(196, 255, 106, 0.22);  /* Aurora blob */

  /* -- Neutrals (dark-first) ---------------------------------- */
  --mz-black:       #000000;   /* True black - app, hero, most sections */
  --mz-ink:         #080808;   /* Near-black alt surface */
  --mz-surface:     #0d0d0d;   /* Raised surface */
  --mz-card:        #111217;   /* Card bg (demo shell, panels) */
  --mz-card-2:      #14151a;   /* Alt card bg */
  --mz-field:       rgba(255,255,255,0.03);  /* Input field on dark */

  /* Hairline borders on dark */
  --mz-border:      rgba(255,255,255,0.08);  /* Default card border */
  --mz-border-2:    rgba(255,255,255,0.12);  /* Hover / prominent */
  --mz-border-3:    rgba(255,255,255,0.20);  /* Strong divider */

  /* -- Text on dark --------------------------------------------
     Values rebalanced for WCAG AA on pure black. Anything above
     the divider is safe for meaningful text; anything below is
     DECORATIVE ONLY (giant ghost numerals, backdrop labels). */
  --mz-fg:          #FFFFFF;                 /* 100 | 21:1 AAA   - Primary */
  --mz-fg-92:       rgba(255,255,255,0.92);  /*  92 | 17.8:1 AAA - Card headline */
  --mz-fg-82:       rgba(255,255,255,0.82);  /*  82 | 13.6:1 AAA - Body copy */
  --mz-fg-70:       rgba(255,255,255,0.70);  /*  70 |  9.3:1 AAA - Supporting / meta */
  --mz-fg-60:       rgba(255,255,255,0.60);  /*  60 |  6.8:1 AA  - Eyebrows, labels */

  /* Legacy aliases kept for back-compat; point at safe values */
  --mz-fg-85:       rgba(255,255,255,0.92);  /* -> fg-92 */
  --mz-fg-48:       rgba(255,255,255,0.70);  /* -> fg-70 (was failing contrast) */
  --mz-fg-35:       rgba(255,255,255,0.60);  /* -> fg-60 (was failing contrast) */

  /* Decorative only - FAIL WCAG. Use for ghosted numerals / giant bg labels. */
  --mz-fg-decor-22: rgba(255,255,255,0.22);  /* Big ghosted labels (decor) */
  --mz-fg-decor-08: rgba(255,255,255,0.08);  /* Giant ghosted numerals (decor) */
  --mz-fg-25:       rgba(255,255,255,0.22);  /* legacy alias -> decor-22 */
  --mz-fg-08:       rgba(255,255,255,0.08);  /* legacy alias -> decor-08 */

  /* -- Text on lime ------------------------------------------- */
  --mz-on-lime:        rgba(0,0,0,0.82);
  --mz-on-lime-soft:   rgba(0,0,0,0.55);
  --mz-on-lime-ghost:  rgba(0,0,0,0.11);

  /* -- Semantic ----------------------------------------------- */
  --mz-error:       #ff6b35;
  --mz-error-bg:    rgba(255,107,53,0.08);
  --mz-info:        #6ab0ff;
  --mz-info-bg:     rgba(106,176,255,0.07);

  /* -- Radii (4 steps only for uniformity) ------------------- */
  --mz-r-sm:   0.5rem;   /*  8px  - inputs, badges */
  --mz-r-md:   1rem;     /* 16px  - cards (default) */
  --mz-r-lg:   1.75rem;  /* 28px  - hero / feature shells */
  --mz-r-pill: 999px;    /* chips, CTAs */

  /* Legacy aliases kept for back-compat -> map to 4-step scale */
  --mz-r-xs:   0.5rem;   /* -> sm */
  --mz-r-xl:   1.75rem;  /* -> lg */
  --mz-r-2xl:  1.75rem;  /* -> lg */

  /* -- Shadows / glows ---------------------------------------- */
  --mz-shadow-card:  0 10px 30px rgba(0,0,0,0.45);
  --mz-glow-sm:      0 0 20px var(--mz-lime-glow);
  --mz-glow-md:      0 0 40px rgba(196,255,106,0.28);
  --mz-glow-lg:      0 0 90px rgba(196,255,106,0.18);
  --mz-glow-pulse:   0 0 66px rgba(196,255,106,0.42);
  --mz-shine:        linear-gradient(100deg, transparent, rgba(196,255,106,0.18), transparent);

  /* -- Spacing (4pt base) ------------------------------------- */
  --mz-s-1:  4px;
  --mz-s-2:  8px;
  --mz-s-3:  12px;
  --mz-s-4:  16px;
  --mz-s-5:  20px;
  --mz-s-6:  24px;
  --mz-s-8:  32px;
  --mz-s-10: 40px;
  --mz-s-12: 48px;
  --mz-s-16: 64px;
  --mz-s-20: 80px;
  --mz-s-24: 96px;

  /* -- Type: font-families ------------------------------------ */
  --mz-font-display: 'Bebas Neue', 'Impact', sans-serif;
  --mz-font-serif:   'Instrument Serif', 'Georgia', serif;  /* italic accent */
  --mz-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* -- Semantic type tokens ----------------------------------- */
  /* Hero - Bebas Neue, flat caps, 2px tracking, line-height 1 */
  --mz-hero-size:       clamp(3rem, 7.5vw, 7rem);
  --mz-hero-weight:     400;
  --mz-hero-tracking:   2px;
  --mz-hero-lh:         1;

  /* Section title - DM Sans, med weight, ~1.1 lh */
  --mz-h2-size:         clamp(2rem, 5vw, 4rem);
  --mz-h2-weight:       500;
  --mz-h2-lh:           1.1;

  /* Card headline - DM Sans semibold */
  --mz-h3-size:         clamp(1.45rem, 2.2vw, 2rem);
  --mz-h3-weight:       600;
  --mz-h3-lh:           1.2;

  /* Reality / giant moment - DM Sans 500 */
  --mz-display-size:    clamp(2.6rem, 6vw, 5.8rem);

  /* Body */
  --mz-body-size:       1rem;            /* 16px */
  --mz-body-lh:         1.6;
  --mz-body-weight:     400;

  --mz-body-lg-size:    1.125rem;        /* 18px */
  --mz-body-sm-size:    0.92rem;         /* ~14.7px */

  /* Eyebrow - uppercase with heavy tracking */
  --mz-eyebrow-size:    0.95rem;
  --mz-eyebrow-track:   0.35em;
  --mz-eyebrow-weight:  400;

  /* Micro label (on cards) */
  --mz-label-size:      0.75rem;         /* 12px */
  --mz-label-track:     0.25em;

  /* Big ghosted index numeral */
  --mz-index-size:      clamp(4.2rem, 8vw, 7rem);
  --mz-index-weight:    700;

  /* Motion */
  --mz-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* primary reveal easing */
  --mz-t-fast:     150ms;
  --mz-t-base:     260ms;
  --mz-t-slow:     520ms;
  --mz-t-reveal:   720ms;
}

/* ===========================================================================
   Base + semantic element styles
   =========================================================================== */

body.moozz,
.moozz-root {
  background: var(--mz-black);
  color: var(--mz-fg);
  font-family: var(--mz-font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.moozz h1, .mz-h1 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-hero-size);
  letter-spacing: var(--mz-hero-tracking);
  line-height: var(--mz-hero-lh);
  font-weight: var(--mz-hero-weight);
  text-transform: none; /* Bebas is already caps */
}

.moozz h2, .mz-h2 {
  font-family: var(--mz-font-body);
  font-size: var(--mz-h2-size);
  line-height: var(--mz-h2-lh);
  font-weight: var(--mz-h2-weight);
  letter-spacing: -0.01em;
}

.moozz h3, .mz-h3 {
  font-family: var(--mz-font-body);
  font-size: var(--mz-h3-size);
  line-height: var(--mz-h3-lh);
  font-weight: var(--mz-h3-weight);
}

.moozz p, .mz-body {
  font-family: var(--mz-font-body);
  font-size: var(--mz-body-size);
  line-height: var(--mz-body-lh);
  font-weight: var(--mz-body-weight);
  color: var(--mz-fg-70);
}

.mz-eyebrow {
  font-family: var(--mz-font-body);
  font-size: var(--mz-eyebrow-size);
  letter-spacing: var(--mz-eyebrow-track);
  text-transform: uppercase;
  color: var(--mz-fg-35);
  font-weight: 400;
}

.mz-label {
  font-family: var(--mz-font-body);
  font-size: var(--mz-label-size);
  letter-spacing: var(--mz-label-track);
  text-transform: uppercase;
  color: var(--mz-fg-35);
}

/* Serif italic accent - the "Keep the Magic." / "Every language." phrase */
.mz-serif-accent {
  font-family: var(--mz-font-serif);
  font-style: italic;
  letter-spacing: 0;
  color: var(--mz-lime);
  font-weight: 400;
}

/* Giant stacked labels like WHAT / DOES / HOW */
.mz-label-stack {
  font-family: var(--mz-font-body);
  font-size: clamp(4rem, 10vw, 7rem);
  letter-spacing: 0.12em;
  line-height: 0.9;
  font-weight: 200;
  color: var(--mz-fg-25);
}

/* Giant ghosted index numeral, bottom-right of cards */
.mz-index {
  font-family: var(--mz-font-body);
  font-size: var(--mz-index-size);
  font-weight: var(--mz-index-weight);
  line-height: 1;
  color: var(--mz-fg-08);
}

code, pre, kbd, .mz-mono {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: 0.9em;
}