@layer base, layouts, featured, player, discovery, components, ribbon;

/* Unified design tokens ----------------------------------------------------- */
:root{
  --ec18-bg:#f6f5ef;
  --ec18-page-bg-base:#f6f5ef;
  --ec18-page-bg-soft:#f8f7f2;
  --ec18-page-bg-deep:#a5a59f;
  --ec18-page-bg-accent:#f6f0d7;
  --ec18-page-bg-image:radial-gradient(125% 92% at 0% 0%,#f6f5ef 0%,rgba(246,245,239,.80) 24%,rgba(246,245,239,.28) 50%,rgba(246,245,239,0) 73%),radial-gradient(68% 46% at 48% 5%,rgba(246,243,226,.06) 0%,rgba(246,243,226,0) 72%),linear-gradient(138deg,#f7f7f1 0%,#f7f6f0 34%,#f6f5ef 57%,#a2a29d 100%);
  --ec18-page-bg-mobile-image:radial-gradient(118% 62% at 0% 0%,#f6f5ef 0%,rgba(246,245,239,.58) 42%,rgba(246,245,239,0) 76%),linear-gradient(164deg,#f7f7f1 0%,#f6f5ef 48%,#a2a29d 100%);
  --ec18-surface-1:#fff;
  --ec18-surface-2:#f7f7f7;
  --ec18-surface-3:#f1f2f4;
  --ec18-text-1:#17171b;
  --ec18-text-2:#3f3d43;
  --ec18-text-muted:#77737a;
  --ec18-text-inverse:#fff;
  --ec18-border-soft:#d8d5cc;
  --ec18-border:#202025;
  --ec18-border-strong:#16161a;
  --ec18-accent:#ffd82f;
  --ec18-accent-strong:#d9b000;
  --ec18-accent-soft:#fff9d9;
  --ec18-accent-contrast:#111318;
  --ec18-selection-bg:#ffd82f;
  --ec18-selection-text:#111318;
  --ec18-accent-on-surface:#765f00;
  --ec18-secondary:#9ddff3;
  --ec18-secondary-contrast:#111318;
  --ec18-success:#15803d;
  --ec18-success-contrast:#ffffff;
  --ec18-warning:#b45309;
  --ec18-warning-contrast:#ffffff;
  --ec18-danger:#dc2626;
  --ec18-danger-contrast:#ffffff;
  --ec18-info:#0369a1;
  --ec18-info-contrast:#ffffff;
  --ec18-header-bg:#101116;
  --ec18-header-text:#fff;
  --ec18-header-muted:#aeb0b7;
  --ec18-header-border:#303139;
  --ec18-header-accent:#ffd82f;
  --ec18-nav-bg:#191a20;
  --ec18-nav-text:#fff;
  --ec18-nav-hover:#ffd82f;
  --ec18-nav-active-bg:#353224;
  --ec18-nav-active-text:#fff;
  --ec18-breadcrumb-bg:#fffbe8;
  --ec18-breadcrumb-text:#4b4a50;
  --ec18-breadcrumb-current:#765f00;
  --ec18-breadcrumb-icon:#765f00;
  --ec18-breadcrumb-border:#e5d57c;
  --ec18-card-bg:#fff;
  --ec18-card-text:#17171b;
  --ec18-card-meta:#77737a;
  --ec18-card-border:#ddd9c8;
  --ec18-sidebar-bg:#fff;
  --ec18-sidebar-heading:#17171b;
  --ec18-sidebar-text:#17171b;
  --ec18-sidebar-muted:#77737a;
  --ec18-sidebar-count:#77737a;
  --ec18-sidebar-icon-bg:#11151b;
  --ec18-sidebar-icon:#ffd82f;
  --ec18-sidebar-divider:#d6cb89;
  --ec18-sidebar-active-bg:#fff9d9;
  --ec18-sidebar-active-text:#765f00;
  --ec18-category-tree-bg:#fff;
  --ec18-category-tree-text:#17171b;
  --ec18-category-tree-muted:#77737a;
  --ec18-category-tree-heading:#765f00;
  --ec18-category-tree-active-bg:#fff9d9;
  --ec18-category-tree-active-text:#765f00;
  --ec18-search-accent:#765f00;
  --ec18-control-focus:#ffe46d;
  --ec18-link-hover:#765f00;
  --ec18-pagination-active-bg:#111318;
  --ec18-pagination-active-text:#fff;
  --ec18-pagination-active-border:#111318;
  --ec18-kicker-bg:#fff9d9;
  --ec18-kicker-text:#765f00;
  --ec18-kicker-border:#e5d57c;
  --ec18-kicker-shadow:2px 2px 0 rgba(22,22,26,.22);
  --ec18-comic-shadow:3px 4px 0 rgba(22,22,26,.20),0 6px 12px rgba(22,22,26,.06);
  --ec18-comic-shadow-soft:2px 3px 0 rgba(22,22,26,.15),0 4px 9px rgba(22,22,26,.05);
  --ec18-input-bg:#f7f7f7;
  --ec18-input-text:#17171b;
  --ec18-input-border:#d8d5cc;
  --ec18-button-bg:#ffd82f;
  --ec18-button-text:#111318;
  --ec18-button-border:#d9b000;
  --ec18-button-hover-bg:#d9b000;
  --ec18-button-hover-text:#111318;
  --ec18-button-secondary-bg:#f7f7f7;
  --ec18-button-secondary-text:#3f3d43;
  --ec18-footer-bg:#0e0e12;
  --ec18-footer-text:#fff;
  --ec18-footer-muted:#a8a8ad;
  --ec18-footer-link:#ffd82f;
  --ec18-footer-border:#2c2c32;

  /* Compatibility aliases. New component CSS must use semantic tokens above. */
  --vtt-paper:var(--ec18-bg);
  --vtt-surface:var(--ec18-surface-1);
  --vtt-surface-soft:var(--ec18-surface-2);
  --vtt-ink:var(--ec18-text-1);
  --vtt-ink-soft:var(--ec18-text-2);
  --vtt-muted:var(--ec18-text-muted);
  --vtt-line:var(--ec18-border);
  --vtt-line-soft:var(--ec18-border-soft);
  --vtt-yellow:var(--ec18-accent);
  --vtt-yellow-deep:var(--ec18-accent-strong);
  --vtt-yellow-text:var(--ec18-accent-contrast);
  --vtt-cyan:var(--ec18-secondary);
  --vtt-violet:var(--ec18-secondary);
  --vtt-green:var(--ec18-success);
  --vtt-red:var(--ec18-danger);
}