/* =========================================================================
   Manwa · Design tokens
   Nguồn: .agent/task/website/manwa-web-ui-spec.md — mục 2 (Design tokens)
   File này không chứa component, chỉ chứa biến. Dùng chung cho web desktop
   và wap để hai nền tảng không lệch màu/typography.
   ========================================================================= */

:root {
  /* --- 2.1 Màu ------------------------------------------------------- */
  --color-primary: #EE0033;
  --color-primary-dark: #990021;
  --color-primary-soft: #FFEBEF;

  --color-text: #231F20;
  --color-text-muted: #808285;
  --color-bg: #F9F8FE;
  --color-field: #EEEEEF;
  --color-black: #000000;

  --color-surface: #FFFFFF;
  --color-surface-dark: #0E0E10;
  --color-border: #ECECEF;

  --color-gold: #FFB800;
  --color-purple: #AF52DE;
  --color-indigo: #5856D6;
  --color-orange: #FF8500;

  /* Màu bổ sung (chưa thành variable trong Figma) */
  --color-success: #34C759;
  --color-success-text: #2FA84F;
  --color-success-text-dark: #228C40;
  --color-toggle-off: #D9D9DE;
  --color-reader-bg: #111114;
  --color-reader-bar: #18181B;
  --color-reader-card: #1C1C20;
  --color-medal-gold: #FFC733;
  --color-medal-silver: #D9DEE6;
  --color-medal-bronze: #DB8C52;

  /* --- 2.2 Gradient -------------------------------------------------- */
  --gradient-vip: linear-gradient(90deg, #FFC733 0%, #FF8C1A 100%);
  --gradient-brand: linear-gradient(90deg, #EE0033 0%, #990021 100%);
  --gradient-ranking: linear-gradient(180deg, #EE0033 0%, #73001A 100%);
  --gradient-profile: linear-gradient(90deg, #2B000F 0%, #990021 60%, #EE0033 100%);
  --gradient-vip-soft: linear-gradient(90deg, #FFF5D6 0%, #FFE6ED 100%);
  --gradient-plans-bg: linear-gradient(135deg, #FFE6ED 0%, #FFF7EB 100%);
  --gradient-genre-xk: linear-gradient(90deg, #F2E6FF 0%, #FFF0F5 100%);
  --overlay-banner: linear-gradient(90deg, rgba(15, 3, 5, .92) 0%, rgba(15, 3, 5, .35) 55%, transparent 100%);
  --overlay-cover: linear-gradient(180deg, transparent 0%, rgba(13, 5, 8, .75) 100%);
  --overlay-detail: linear-gradient(180deg, rgba(13, 8, 20, .55) 0%, rgba(13, 8, 20, .92) 100%);

  /* --- 2.3 Typography ------------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- 2.4 Bo góc ---------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- 2.5 Shadow ---------------------------------------------------- */
  --shadow-seg: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-featured: 0 12px 32px rgba(238, 0, 51, .18);
  --shadow-cover: 0 20px 40px rgba(0, 0, 0, .50);
  --shadow-podium: 0 16px 32px rgba(51, 0, 13, .50);
  --shadow-tile: 0 8px 24px rgba(175, 82, 222, .20);
  --shadow-focus: 0 0 0 4px rgba(238, 0, 51, .12);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .40);
  --shadow-card: 0 2px 12px rgba(35, 31, 32, .04);

  /* --- 3. Layout ----------------------------------------------------- */
  --container: 1200px;
  --gutter: 24px;
  --page-pad: 120px;
  --header-h: 72px;
  --col-main: 792px;
  --col-side: 384px;
  --reader-width: 720px;
}

/* Bộ màu thể loại — mục 2.1. Dùng làm class tiện dụng khi không render inline. */
.mw-genre--ngon-tinh { --genre: #FF2D55; }
.mw-genre--xuyen-khong { --genre: #AF52DE; }
.mw-genre--trong-sinh { --genre: #34C759; }
.mw-genre--co-dai { --genre: #FF8500; }
.mw-genre--huyen-huyen { --genre: #5856D6; }
.mw-genre--hanh-dong { --genre: #EE0033; }
.mw-genre--kinh-di { --genre: #1F2937; }
.mw-genre--hai-huoc { --genre: #E6A100; }
.mw-genre--hoc-duong { --genre: #0A7AFF; }
.mw-genre--tat-ca { --genre: #808285; }