/* ============================================================
   Material 3 Design Tokens — Chinese Subject (语文)
   Scoped to .subject-overlay.subject-chinese AND body.subject-chinese.
   The body scope ensures fixed children inherit tokens.
   M3 warm earthy gold seed (#BBA364) — evokes 古典/书卷气.
   Component-level styles (.zh-tile / .hanzi-cell / .poem-card /
   .idiom-card / etc.) live in subjects.css and reference these
   --md-* tokens, so they automatically inherit the right palette.
   ============================================================ */

.subject-overlay.subject-chinese,
body.subject-chinese .sub-appbar,
body.subject-chinese .sub-chips,
body.subject-chinese .sub-page,
body.subject-chinese .stats-drawer,
body.subject-chinese .drawer-scrim {
  /* ---- M3 Color Tokens (Warm Earthy Gold seed #BBA364) ---- */
  --md-primary: #7A5E20;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #F8E6B5;
  --md-on-primary-container: #261A00;

  --md-secondary: #6B5C3D;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #F5E0B8;
  --md-on-secondary-container: #241A0A;

  --md-tertiary: #8C5643;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #F5D4C2;
  --md-on-tertiary-container: #2D1509;

  --md-error: #B3261E;
  --md-on-error: #FFFFFF;
  --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;

  --md-success: #2E7D32;
  --md-success-container: #E8F5E9;
  --md-on-success-container: #1B5E20;

  /* Surface hierarchy (warm cream tones) */
  --md-surface: #FDFAF1;
  --md-surface-dim: #E0D8C6;
  --md-surface-bright: #FDFAF1;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F8F1E0;
  --md-surface-container: #F2EBD7;
  --md-surface-container-high: #ECE4CD;
  --md-surface-container-highest: #E6DDC4;

  --md-on-surface: #1F1B11;
  --md-on-surface-variant: #4F4732;
  --md-outline: #807567;
  --md-outline-variant: #D2C6B2;

  --md-inverse-surface: #34301F;
  --md-inverse-on-surface: #F7F0E2;
  --md-inverse-primary: #E5C47A;

  /* ---- Elevation (5 box-shadow levels) ---- */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(50,40,10,0.30), 0 1px 3px 1px rgba(50,40,10,0.15);
  --md-elevation-2: 0 1px 2px rgba(50,40,10,0.30), 0 2px 6px 2px rgba(50,40,10,0.15);
  --md-elevation-3: 0 1px 3px rgba(50,40,10,0.30), 0 4px 8px 3px rgba(50,40,10,0.15);
  --md-elevation-4: 0 2px 3px rgba(50,40,10,0.30), 0 6px 10px 4px rgba(50,40,10,0.15);
  --md-elevation-5: 0 4px 4px rgba(50,40,10,0.30), 0 8px 12px 6px rgba(50,40,10,0.15);

  /* ---- Shape scale ---- */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;

  /* ---- Motion (emphasized easing) ---- */
  --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-duration-short: 200ms;
  --md-duration-medium: 350ms;
  --md-duration-long: 500ms;

  /* ---- Type scale (Material 3) ---- */
  --md-font-display-lg: 57px/64px;
  --md-font-display-md: 45px/52px;
  --md-font-display-sm: 36px/44px;
  --md-font-headline-lg: 32px/40px;
  --md-font-headline-md: 28px/36px;
  --md-font-headline-sm: 24px/32px;
  --md-font-title-lg: 22px/28px;
  --md-font-title-md: 16px/24px;
  --md-font-title-sm: 14px/20px;
  --md-font-body-lg: 16px/24px;
  --md-font-body-md: 14px/20px;
  --md-font-body-sm: 12px/16px;
  --md-font-label-lg: 14px/20px;
  --md-font-label-md: 12px/16px;
  --md-font-label-sm: 11px/16px;
}

/* Apply background to overlay surface */
.subject-overlay.subject-chinese {
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.subject-overlay.subject-chinese .sub-appbar,
.subject-overlay.subject-chinese .sub-chips {
  background: var(--md-surface);
  border-bottom-color: var(--md-outline-variant);
}