/*
 * W2W shared typography system.
 * Portable CSS for plugin-w2w-movie, plugin-weirdo, and other W2W plugins.
 * Enqueue this before plugin-specific CSS so local components can override only when needed.
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  --w2w-font-main: "Roboto", "Be Vietnam Pro", Arial, sans-serif;
  --w2w-font-heading: var(--w2w-font-main);
  --w2w-font-body: var(--w2w-font-main);
  --w2w-font-brand: var(--w2w-font-main);

  --w2w-fs-xs: 12px;
  --w2w-fs-sm: 14px;
  --w2w-fs-base: 16px;
  --w2w-fs-md: 18px;
  --w2w-fs-lg: 22px;
  --w2w-fs-xl: 28px;
  --w2w-fs-2xl: 36px;
  --w2w-fs-3xl: 44px;

  --w2w-lh-tight: 1.2;
  --w2w-lh-normal: 1.5;
  --w2w-lh-reading: 1.7;

  --w2w-text-on-light: #363636;
  --w2w-text-on-light-soft: #454444;
  --w2w-text-on-light-muted: #696561;
  --w2w-text-on-dark: #ffffff;
  --w2w-text-on-dark-soft: #C2C2C2;
  --w2w-text-on-dark-muted: #B9B9B9;
  --w2w-accent: #ff8a00;
  --w2w-danger: #c0392b;
  --w2w-success: #138a36;

  --w2w-color-text: var(--w2w-text-on-light);
  --w2w-color-body: var(--w2w-text-on-light-soft);
  --w2w-color-muted: var(--w2w-text-on-light-muted);
  --w2w-color-subtle: var(--w2w-text-on-light-muted);
  --w2w-color-brand: var(--w2w-accent);
  --w2w-color-brand-strong: var(--w2w-accent);
  --w2w-color-link: var(--w2w-accent);
}

@media (max-width: 768px) {
  :root {
    --w2w-fs-xs: 11px;
    --w2w-fs-sm: 13px;
    --w2w-fs-base: 16px;
    --w2w-fs-md: 17px;
    --w2w-fs-lg: 20px;
    --w2w-fs-xl: 24px;
    --w2w-fs-2xl: 30px;
    --w2w-fs-3xl: 34px;
  }
}

html,
body,
button,
input,
select,
textarea,
.w2w-plugin,
.w2w-movie-app,
.w2w-movie-component,
.weirdo-app,
.weirdo-component {
  font-family: var(--w2w-font-main);
}

body,
.w2w-plugin,
.w2w-movie-app,
.w2w-movie-component,
.weirdo-app,
.weirdo-component {
  color: var(--w2w-text-on-light-soft);
  font-size: var(--w2w-fs-base);
  font-weight: 400;
  line-height: var(--w2w-lh-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.w2w-title,
.w2w-page-title,
.w2w-section-title,
.w2w-card-title,
.entry-title {
  color: var(--w2w-text-on-light);
  font-family: var(--w2w-font-heading);
  letter-spacing: 0;
}

h1,
.w2w-page-title,
.entry-title {
  font-size: var(--w2w-fs-2xl);
  font-weight: 700;
  line-height: var(--w2w-lh-tight);
}

h2,
.w2w-section-title {
  font-size: var(--w2w-fs-xl);
  font-weight: 700;
  line-height: var(--w2w-lh-tight);
}

h3 {
  font-size: var(--w2w-fs-lg);
  font-weight: 600;
  line-height: 1.3;
}

p,
li,
.w2w-body-text {
  color: var(--w2w-text-on-light-soft);
  font-size: var(--w2w-fs-base);
  font-weight: 400;
  line-height: var(--w2w-lh-normal);
}

.article-content,
.entry-content,
.w2w-reading-content {
  color: var(--w2w-text-on-light-soft);
  font-size: 17px;
  line-height: var(--w2w-lh-reading);
}

.w2w-card-title {
  font-size: var(--w2w-fs-base);
  font-weight: 600;
  line-height: 1.35;
}

.w2w-card-meta,
.w2w-meta,
.w2w-caption,
.w2w-muted {
  color: var(--w2w-text-on-light-muted);
  font-size: var(--w2w-fs-sm);
  line-height: 1.4;
}

.w2w-badge,
.w2w-tag,
.w2w-pill {
  font-size: var(--w2w-fs-xs);
  font-weight: 600;
  line-height: 1.3;
}

.w2w-button,
button,
input[type="button"],
input[type="submit"] {
  font-family: var(--w2w-font-main);
  font-size: var(--w2w-fs-sm);
  font-weight: 600;
  line-height: 1.25;
}

a,
.w2w-link {
  color: var(--w2w-accent);
}

.w2w-on-dark,
.w2w-on-dark h1,
.w2w-on-dark h2,
.w2w-on-dark h3,
.w2w-on-dark h4,
.w2w-on-dark h5,
.w2w-on-dark h6,
.w2w-text-on-dark {
  color: var(--w2w-text-on-dark);
}

.w2w-on-dark p,
.w2w-on-dark li,
.w2w-on-dark .w2w-body-text,
.w2w-text-on-dark-soft {
  color: var(--w2w-text-on-dark-soft);
}

.w2w-on-dark .w2w-meta,
.w2w-on-dark .w2w-caption,
.w2w-on-dark .w2w-muted,
.w2w-text-on-dark-muted {
  color: var(--w2w-text-on-dark-muted);
}

.w2w-text-on-light {
  color: var(--w2w-text-on-light);
}

.w2w-text-on-light-soft {
  color: var(--w2w-text-on-light-soft);
}

.w2w-text-on-light-muted {
  color: var(--w2w-text-on-light-muted);
}

.w2w-text-accent {
  color: var(--w2w-accent);
}

.w2w-text-danger {
  color: var(--w2w-danger);
}

.w2w-text-success {
  color: var(--w2w-success);
}