@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;500;600;700&display=swap");

:root {
  --color-bg-deep: #101426;
  --color-bg-soft: #181d34;
  --color-surface: #222844;
  --color-gold: #d8b56b;
  --color-gold-light: #f0d79a;
  --color-text: #f7f2e8;
  --color-text-muted: #bdb8ac;
  --color-accent: #8f9ee8;
  --color-success: #9bc5a3;
  --color-warning: #d7a67a;
  --color-border: rgba(216, 181, 107, 0.30);

  --font-th: 'Noto Serif Thai', Georgia, serif;
  --font-en-title: 'Noto Serif Thai', Georgia, serif;
  --font-en-body: 'Noto Serif Thai', Georgia, serif;

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
  --transition-standard: 220ms ease;

  /*
   * Single documented layering scale (SRS Phase 4 §2). Every stacking
   * component in this project must reference one of these variables
   * instead of an arbitrary z-index — this is the only place new layers
   * should be added.
   */
  --z-reading-board: 10;
  --z-card-active: 20;
  --z-sticky-controls: 30;
  --z-dialog-backdrop: 1000;
  --z-dialog: 1010;
  --z-toast: 1100;
}