/* =========================================================================
   luminica.ai — design system entry stylesheet
   Rendered designs receive ONLY this file's transitive @import closure.
   Everything brand-relevant must be reachable from here.
   ========================================================================= */

@import "./fonts/fonts.css";
@import "./tokens/tokens.css";

/* -------------------------------------------------------------------------
   Brand helper classes — encode the Brand Kit web/PDF hierarchy (§5).
   These are the canonical class vocabulary for Luminica designs.
   Layout/spacing is up to the design; these set type, weight, and color.
   ------------------------------------------------------------------------- */

/* Hero / H1 — Bebas Neue, uppercase, high impact */
.luminica-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(56px, 6vw, 80px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--luminica-purple);   /* on dark backgrounds, override to var(--luminica-apricot) */
}

/* H2 — Montserrat bold */
.luminica-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(32px, 3.2vw, 40px);
  line-height: 1.2;
  color: var(--luminica-purple);   /* on dark: var(--luminica-apricot) */
}

/* H3 — Montserrat semibold */
.luminica-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.3;
  color: var(--luminica-purple);   /* on dark: var(--luminica-white) */
}

/* Body */
.luminica-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: #1A1A1A;                  /* on dark: var(--luminica-offwhite) */
}

/* Caption / source — IBM Plex Mono */
.luminica-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--luminica-muted);
}

/* The "light" — apricot carries the single most important message. Use sparingly. */
.luminica-accent {
  color: var(--luminica-apricot);
}

/* Surfaces */
.luminica-surface-dark {
  background: var(--luminica-black);
  color: var(--luminica-offwhite);
}
.luminica-surface-purple {
  background: var(--luminica-purple);
  color: var(--luminica-white);
}
.luminica-gradient-bg {
  background: var(--luminica-gradient);
  color: var(--luminica-white);
}

/* Primary CTA — apricot light on purple frame */
.luminica-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 9999px;
  background: var(--luminica-apricot);
  color: var(--luminica-purple);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.luminica-cta:hover {
  background: var(--luminica-apricot-deep);
}