/* ============================================================
   LoveStock — Colors & Type
   Source of truth: constants/theme.ts + landing/src/app/globals.css
   ============================================================ */

:root {
  /* ---------- Brand colors ---------- */
  --ls-brand-pink:   #FC0273;   /* primary — hot magenta, CTAs, love */
  --ls-brand-violet: #CF02FB;   /* mid-gradient, accents */
  --ls-brand-purple: #8700D6;   /* secondary — deep purple */
  --ls-brand-gradient: linear-gradient(135deg, #FC0273 0%, #CF02FB 50%, #8700D6 100%);

  /* ---------- Dark surfaces (primary theme — app default) ---------- */
  --ls-dark-bg:      #0E051F;   /* page background, near-black violet */
  --ls-dark-card:    #1A1230;   /* cards, elevated surfaces */
  --ls-dark-muted:   #241834;   /* quiet surfaces, chips */
  --ls-dark-border:  #2D2650;   /* hairlines */

  /* ---------- Light surfaces ---------- */
  --ls-light-bg:     #FAFAFC;
  --ls-light-card:   #F5F3FF;
  --ls-light-muted:  #EDEAF5;
  --ls-light-border: #E6E4EE;

  /* ---------- Text ---------- */
  --ls-text-on-dark:        #FFFFFF;
  --ls-text-on-dark-muted:  #A8B0D8;   /* cool lavender-gray */
  --ls-text-on-light:        #0E051F;
  --ls-text-on-light-muted:  #5C5F72;
  --ls-on-primary:           #FFFFFF;

  /* ---------- Semantic ---------- */
  --ls-success:       #22C55E;
  --ls-success-alpha: #22C55E20;
  --ls-error:         #EF4444;
  --ls-error-alpha:   #EF444420;
  --ls-danger:        #DC2626;
  --ls-warning:       #F49503;

  /* ---------- Type scale ---------- */
  --ls-font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ls-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ls-fs-display: 72px;   /* hero headline */
  --ls-fs-h1:      40px;
  --ls-fs-h2:      32px;   /* section titles on landing */
  --ls-fs-h3:      24px;
  --ls-fs-title:   20px;   /* company name on card */
  --ls-fs-body:    16px;
  --ls-fs-body-sm: 14px;
  --ls-fs-caption: 12px;
  --ls-fs-micro:   10px;

  --ls-fw-regular:  400;
  --ls-fw-medium:   500;
  --ls-fw-semibold: 600;
  --ls-fw-bold:     700;

  --ls-tracking-tight:  -0.02em;
  --ls-tracking-normal:  0;
  --ls-tracking-wide:    0.05em;

  /* ---------- Radii ---------- */
  --ls-radius-sm:    8px;
  --ls-radius-md:    12px;
  --ls-radius-lg:    16px;   /* tags, fun-fact containers */
  --ls-radius-xl:    20px;   /* card images */
  --ls-radius-2xl:   24px;   /* cards, CTAs */
  --ls-radius-pill:  999px;  /* pills, FABs */

  /* ---------- Spacing (8pt-ish with 4 steps) ---------- */
  --ls-space-1:  4px;
  --ls-space-2:  8px;
  --ls-space-3:  12px;
  --ls-space-4:  16px;
  --ls-space-5:  20px;
  --ls-space-6:  24px;
  --ls-space-8:  32px;
  --ls-space-10: 40px;
  --ls-space-12: 48px;

  /* ---------- Elevation / shadows ---------- */
  --ls-shadow-card:  0 8px 24px rgba(0, 0, 0, 0.20);
  --ls-shadow-fab:   0 4px 6px rgba(0, 0, 0, 0.30);
  --ls-shadow-pink-glow: 0 12px 40px rgba(252, 2, 115, 0.25);
  --ls-shadow-deep:  0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---------- Motion ---------- */
  --ls-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ls-dur-fast: 150ms;
  --ls-dur-med:  300ms;
  --ls-dur-slow: 600ms;
}

/* ============================================================
   Semantic type classes (dark theme default)
   ============================================================ */
html, body { background: var(--ls-dark-bg); color: var(--ls-text-on-dark); font-family: var(--ls-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ls-display {
  font-family: var(--ls-font-sans);
  font-size: var(--ls-fs-display);
  font-weight: var(--ls-fw-bold);
  letter-spacing: var(--ls-tracking-tight);
  line-height: 1.05;
}
.ls-h1 { font-size: var(--ls-fs-h1); font-weight: var(--ls-fw-bold); letter-spacing: var(--ls-tracking-tight); line-height: 1.15; }
.ls-h2 { font-size: var(--ls-fs-h2); font-weight: var(--ls-fw-bold); letter-spacing: var(--ls-tracking-tight); line-height: 1.2; }
.ls-h3 { font-size: var(--ls-fs-h3); font-weight: var(--ls-fw-bold); line-height: 1.3; }
.ls-title { font-size: var(--ls-fs-title); font-weight: var(--ls-fw-bold); line-height: 1.3; letter-spacing: -0.01em; }
.ls-section-title { font-size: 17px; font-weight: var(--ls-fw-bold); letter-spacing: -0.2px; }
.ls-body { font-size: var(--ls-fs-body); line-height: 1.5; font-weight: var(--ls-fw-regular); }
.ls-body-sm { font-size: var(--ls-fs-body-sm); line-height: 1.45; }
.ls-caption { font-size: var(--ls-fs-caption); line-height: 1.4; }
.ls-micro { font-size: var(--ls-fs-micro); line-height: 1.3; }

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