/* Lamp10 visual identity - Brand Manual v2.0, October 2026. */
@font-face {
  font-family: "DejaVu Sans";
  src: url("assets/lamp10/fonts/DejaVuSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans";
  src: url("assets/lamp10/fonts/DejaVuSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --vz-midnight:      #18243A;
  --vz-midnight-2:    #22314C;
  --vz-midnight-3:    #34445F;

  --vz-cyan:          #FFBE45;
  --vz-violet:        #8A94A6;
  --vz-magenta:       #18243A;
  --vz-cyan-ink:      #8A5A00;
  --vz-cyan-soft:     #FFF4D8;
  --vz-violet-soft:   #EEF0F4;
  --vz-magenta-soft:  #FAF7F0;

  --vz-lime:          #FFBE45;

  /* ============================================================
     COLOR — Neutrals (light mode default)
     ============================================================ */
  --vz-bg:            #FAF7F0;   /* ivory page background */
  --vz-surface:       #FFFFFF;   /* card */
  --vz-surface-2:     #F4F5F8;   /* sunken */
  --vz-line:          #E6E8EE;   /* hairline */
  --vz-line-strong:   #D4D7DF;

  --vz-fg:            #18243A;   /* text strong */
  --vz-fg-2:          #34445F;   /* text secondary */
  --vz-fg-3:          #5F6979;   /* text tertiary / meta */
  --vz-fg-4:          #7D8694;   /* placeholder / disabled */

  /* ============================================================
     COLOR — Channel marks (omnichannel)
     Used as small dots / left-borders on conversation cards.
     ============================================================ */
  --vz-ch-whatsapp:   #25D366;
  --vz-ch-instagram:  #E1306C;
  --vz-ch-messenger:  #0084FF;
  --vz-ch-tiktok:     #111111;
  --vz-ch-meta:       #1877F2;

  /* ============================================================
     COLOR — Semantic (status)
     ============================================================ */
  --vz-success:       #16A75C;
  --vz-success-soft:  #DDF5E7;
  --vz-warning:       #E89B12;
  --vz-warning-soft:  #FFEFCD;
  --vz-danger:        #E5364C;
  --vz-danger-soft:   #FCE0E4;
  --vz-info:          #0073E6;
  --vz-info-soft:     #DBEBFE;

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --vz-font-display:  "DejaVu Sans", ui-sans-serif, system-ui, sans-serif;
  --vz-font-body:     "DejaVu Sans", ui-sans-serif, system-ui, sans-serif;
  --vz-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — Scale (modular, optimized for SaaS UI + marketing) */
  --vz-text-2xs:  11px;
  --vz-text-xs:   12px;
  --vz-text-sm:   13px;
  --vz-text-base: 15px;
  --vz-text-md:   17px;
  --vz-text-lg:   20px;
  --vz-text-xl:   24px;
  --vz-text-2xl:  32px;
  --vz-text-3xl:  44px;
  --vz-text-4xl:  60px;
  --vz-text-5xl:  84px;

  /* Line heights */
  --vz-lh-tight:  1.05;
  --vz-lh-snug:   1.2;
  --vz-lh-normal: 1.45;
  --vz-lh-loose:  1.65;

  /* Letter spacing */
  --vz-tracking-tight:  0;
  --vz-tracking-snug:   0;
  --vz-tracking-normal: 0;
  --vz-tracking-wide:   0.04em;
  --vz-tracking-caps:   0.12em;

  /* ============================================================
     SPACE — 4px base
     ============================================================ */
  --vz-s-0:  0;
  --vz-s-1:  4px;
  --vz-s-2:  8px;
  --vz-s-3:  12px;
  --vz-s-4:  16px;
  --vz-s-5:  20px;
  --vz-s-6:  24px;
  --vz-s-8:  32px;
  --vz-s-10: 40px;
  --vz-s-12: 48px;
  --vz-s-16: 64px;
  --vz-s-20: 80px;
  --vz-s-24: 96px;

  /* ============================================================
     RADII — moderate/sharp blend
     ============================================================ */
  --vz-r-xs:   4px;   /* chips, pills inside dense UI */
  --vz-r-sm:   6px;   /* inputs */
  --vz-r-md:   10px;  /* default cards / buttons */
  --vz-r-lg:   14px;  /* panels */
  --vz-r-xl:   20px;  /* hero modules */
  --vz-r-full: 999px;

  /* ============================================================
     SHADOWS — soft, low-contrast (light-mode)
     Avoid colored glow except on hover for primary CTA.
     ============================================================ */
  --vz-shadow-xs: 0 1px 0 rgba(11,16,32,0.04);
  --vz-shadow-sm: 0 1px 2px rgba(11,16,32,0.06), 0 1px 1px rgba(11,16,32,0.04);
  --vz-shadow-md: 0 4px 12px rgba(11,16,32,0.06), 0 2px 4px rgba(11,16,32,0.04);
  --vz-shadow-lg: 0 12px 32px rgba(11,16,32,0.08), 0 4px 12px rgba(11,16,32,0.05);
  --vz-shadow-xl: 0 24px 60px rgba(11,16,32,0.12), 0 8px 24px rgba(11,16,32,0.06);
  --vz-shadow-glow: 0 0 0 4px rgba(255,190,69,0.22), 0 8px 24px rgba(24,36,58,0.16);

  /* Inner / focus */
  --vz-ring: 0 0 0 3px rgba(255,190,69,0.55);

  /* ============================================================
     MOTION
     ============================================================ */
  --vz-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);    /* default */
  --vz-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* exits */
  --vz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful */
  --vz-dur-fast:    140ms;
  --vz-dur-base:    220ms;
  --vz-dur-slow:    420ms;

  /* ============================================================
     GRADIENTS — used sparingly for hero / data viz
     ============================================================ */
  --vz-grad-hero: linear-gradient(180deg, #18243A 0%, #18243A 100%);
  --vz-grad-brand: linear-gradient(95deg, #18243A 0%, #18243A 100%);
  --vz-grad-cyan: linear-gradient(135deg, #FFBE45 0%, #FFBE45 100%);
  --vz-grad-magenta: linear-gradient(135deg, #18243A 0%, #18243A 100%);
}

/* ============================================================
   Dark theme override
   Apply via [data-theme="dark"] on <html> or a region.
   ============================================================ */
[data-theme="dark"] {
  --vz-bg:          #18243A;
  --vz-surface:     #22314C;
  --vz-surface-2:   #121C2D;
  --vz-line:        #34445F;
  --vz-line-strong: #4A5A75;

  --vz-fg:          #F4F6FB;
  --vz-fg-2:        #B6BED4;
  --vz-fg-3:        #7E879F;
  --vz-fg-4:        #5A6280;

  --vz-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --vz-shadow-md:   0 6px 16px rgba(0,0,0,0.45);
  --vz-shadow-lg:   0 16px 40px rgba(0,0,0,0.55);
}

/* ============================================================
   Semantic element styling — use as base, override per surface
   ============================================================ */
.vz-display-hero {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, var(--vz-text-5xl));
  line-height: var(--vz-lh-tight);
  letter-spacing: var(--vz-tracking-tight);
}

.vz-h1 {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: var(--vz-text-3xl);
  line-height: var(--vz-lh-tight);
  letter-spacing: var(--vz-tracking-tight);
  color: var(--vz-fg);
}
.vz-h2 {
  font-family: var(--vz-font-display);
  font-weight: 600;
  font-size: var(--vz-text-2xl);
  line-height: var(--vz-lh-snug);
  letter-spacing: var(--vz-tracking-snug);
  color: var(--vz-fg);
}
.vz-h3 {
  font-family: var(--vz-font-display);
  font-weight: 500;
  font-size: var(--vz-text-xl);
  line-height: var(--vz-lh-snug);
  color: var(--vz-fg);
}
.vz-h4 {
  font-family: var(--vz-font-body);
  font-weight: 600;
  font-size: var(--vz-text-md);
  line-height: var(--vz-lh-snug);
  color: var(--vz-fg);
}

.vz-body {
  font-family: var(--vz-font-body);
  font-weight: 400;
  font-size: var(--vz-text-base);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-2);
}
.vz-body-sm {
  font-family: var(--vz-font-body);
  font-weight: 400;
  font-size: var(--vz-text-sm);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-2);
}
.vz-meta {
  font-family: var(--vz-font-body);
  font-weight: 500;
  font-size: var(--vz-text-xs);
  line-height: var(--vz-lh-normal);
  color: var(--vz-fg-3);
}

.vz-eyebrow {
  font-family: var(--vz-font-body);
  font-weight: 600;
  font-size: var(--vz-text-xs);
  letter-spacing: var(--vz-tracking-caps);
  text-transform: uppercase;
  color: var(--vz-fg-3);
}

.vz-mono {
  font-family: var(--vz-font-mono);
  font-size: var(--vz-text-sm);
  letter-spacing: 0;
}

.vz-num {
  font-family: var(--vz-font-display);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}