/* LTX Studio Design System — flattened tokens */

/* ===== tokens/fonts.css ===== */
/* LTX Studio — Webfont.
 * SUBSTITUTE: production uses a custom/licensed neo-grotesque. Inter is the documented
 * closest open substitute. Loaded from Google Fonts; swap the @font-face for the licensed
 * face when available. Keep display weight at 400 — do not reach for 700.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");


/* ===== tokens/colors.css ===== */
/* LTX Studio — Color tokens
 * Single dark canvas, one rationed accent (electric blue), violet only on the ribbon.
 * Hex values sampled from the ltx.io/studio marketing capture.
 */
:root {
  /* Brand & accent — the system's single instrument color */
  --color-accent-blue: #2B61FF;       /* eyebrows, arrow buttons, stars, footer headings, CTA band */
  --color-accent-blue-deep: #0F3FCD;  /* darker CTA-gradient stop, pressed/hover blue */

  /* Promo violet — ONLY on the top announcement ribbon, never in the body */
  --color-promo-violet-from: #7130D9;
  --color-promo-violet-to: #A482D9;

  /* Surface */
  --color-canvas: #0B0B0B;          /* global near-black background — the only page bg */
  --color-surface-raised: #16181D;  /* barely-lifted panel: FAQ hover, quiet fills */
  --color-surface-slate: #252830;   /* cool slate for product-UI mocks, sidebars, glass base */
  --color-glass-fill: rgba(255, 255, 255, 0.08); /* frosted stat cards over imagery */
  --color-hairline: #262626;        /* 1px dividers, tile gaps */
  --color-hairline-soft: #1C1C1C;   /* fainter rules: footer separators, legal row */

  /* Text */
  --color-ink: #FFFFFF;             /* headlines, card titles, nav, labels on light surfaces */
  --color-ink-muted: #9CA0A8;       /* body copy, subheads, captions, testimonials */
  --color-ink-faint: #6B6F77;       /* logo marquee, footer fine print, legal, copyright */
  --color-on-accent: #FFFFFF;       /* text/glyphs on the blue CTA band & arrow buttons */
  --color-on-light: #0B0B0B;        /* near-black text inside white buttons */

  /* Semantic */
  --color-star-rating: #2B61FF;     /* five-star glyph fill — the accent blue as a glyph */

  /* Gradients */
  --gradient-cta: linear-gradient(90deg, var(--color-accent-blue-deep) 0%, var(--color-accent-blue) 100%);
  --gradient-promo: linear-gradient(90deg, var(--color-promo-violet-from) 0%, var(--color-promo-violet-to) 100%);

  /* Semantic aliases */
  --bg-page: var(--color-canvas);
  --bg-panel: var(--color-surface-slate);
  --bg-panel-quiet: var(--color-surface-raised);
  --text-heading: var(--color-ink);
  --text-body: var(--color-ink-muted);
  --text-faint: var(--color-ink-faint);
  --text-accent: var(--color-accent-blue);
  --border-divider: var(--color-hairline);
  --border-divider-soft: var(--color-hairline-soft);
}


/* ===== tokens/typography.css ===== */
/* LTX Studio — Typography tokens
 * One neo-grotesque family. Display weights stay 400 — scale + uppercase + tracking carry impact.
 * Production face is a custom licensed grotesque; Inter is the documented substitute.
 */
:root {
  --font-sans: "Inter", "Helvetica Now Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-feature: "kern" 1, "liga" 1;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;

  /* Type scale — token: size / weight / line-height / letter-spacing / case */
  --type-display-xl-size: 88px;
  --type-display-xl-weight: 400;
  --type-display-xl-leading: 1.00;
  --type-display-xl-tracking: 0.5px;

  --type-display-lg-size: 64px;
  --type-display-lg-weight: 400;
  --type-display-lg-leading: 1.04;
  --type-display-lg-tracking: 0.4px;

  --type-headline-size: 40px;
  --type-headline-weight: 400;
  --type-headline-leading: 1.10;
  --type-headline-tracking: 0.4px;

  --type-quote-size: 22px;
  --type-quote-weight: 400;
  --type-quote-leading: 1.45;
  --type-quote-tracking: -0.2px;

  --type-title-card-size: 18px;
  --type-title-card-weight: 500;
  --type-title-card-leading: 1.35;
  --type-title-card-tracking: 0;

  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.50;

  --type-body-size: 15px;
  --type-body-weight: 400;
  --type-body-leading: 1.55;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.50;

  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 500;
  --type-eyebrow-leading: 1.30;
  --type-eyebrow-tracking: 1.6px;

  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-leading: 1.20;
  --type-caption-tracking: 0.6px;

  --type-button-size: 13px;
  --type-button-weight: 500;
  --type-button-leading: 1.0;
  --type-button-tracking: 0.6px;

  --type-nav-size: 14px;
  --type-nav-weight: 400;
  --type-nav-leading: 1.0;
}


/* ===== tokens/spacing.css ===== */
/* LTX Studio — Spacing & radius tokens. Base unit 8px. */
:root {
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 120px;  /* vertical gap between major sections — black is the separator */

  /* Layout */
  --container-max: 1280px;
  --container-gutter: 48px;

  /* Border radius */
  --radius-xs: 2px;     /* inline chips, glyph corners */
  --radius-sm: 6px;     /* buttons, prompt chips, pill overlays */
  --radius-md: 8px;     /* media tiles, image frames, arrow-launch buttons */
  --radius-lg: 12px;    /* glass stat cards, slate UI-mock panels */
  --radius-xl: 16px;    /* large hero / showcase image containers */
  --radius-full: 9999px;/* carousel arrows, avatar, star glyphs */

  /* Glass elevation */
  --glass-blur: 20px;
  --glass-stroke: 1px solid rgba(255, 255, 255, 0.08);
}


/* ===== tokens/base.css ===== */
/* LTX Studio — base resets + role utility classes built from the tokens. */
:root {
  color-scheme: dark;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type roles */
.ltx-display-xl {
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}
.ltx-display-lg {
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}
.ltx-headline {
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}
.ltx-quote {
  font-size: var(--type-quote-size);
  font-weight: var(--type-quote-weight);
  line-height: var(--type-quote-leading);
  letter-spacing: var(--type-quote-tracking);
  color: var(--color-ink);
}
.ltx-title-card {
  font-size: var(--type-title-card-size);
  font-weight: var(--type-title-card-weight);
  line-height: var(--type-title-card-leading);
  color: var(--color-ink);
}
.ltx-body-lg {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  color: var(--color-ink-muted);
}
.ltx-body {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--color-ink-muted);
}
.ltx-body-sm {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  color: var(--color-ink-muted);
}
.ltx-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent-blue);
}
.ltx-caption {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}