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

/* Unified design tokens ----------------------------------------------------- */
:root{
  --ec18-bg:#f6f5ef;
  --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-accent-on-surface:#765f00;
  --ec18-secondary:#9ddff3;
  --ec18-success:#15803d;
  --ec18-warning:#b45309;
  --ec18-danger:#dc2626;
  --ec18-info:#0369a1;
  --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);
}