/* mutqin design tokens — diambil langsung dari Figma variables (Theme + Component + Layout + Typography) */
:root {
  /* bg */
  --bg-canvas: #f4f4f5;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-hover: #fafafb;
  --bg-pressed: #f4f4f5;
  /* text */
  --text-primary: #1b1c1f;
  --text-secondary: #6b6b70;
  --text-muted: #8a8a8e;
  --text-on-color: #ffffff;
  /* border */
  --border-default: #e6e6ea;
  --border-edge: #e2e2e6;
  --border-edge-hover: #d4d4da;
  --border-focus: #2f6bff;
  /* badge */
  --badge-violet-soft: #efe7ff;
  --badge-violet-fill: #7b4dff;
  --badge-violet-text: #5b2fe0;
  /* reward (pudar) */
  --reward-xp-soft: #fff4d1;
  --reward-xp-icon: #e3a008;
  --reward-xp-text: #9a6b00;
  /* button (C: bg + inner edge + 2px outside stroke) */
  --button-bg: #ffffff;
  --button-bg-hover: #fafafb;
  --button-bg-pressed: #f4f4f5;
  --button-edge: #e2e2e6;
  --button-edge-hover: #d4d4da;
  --button-text: #1b1c1f;
  --button-primary-bg: #7b4dff;
  --button-primary-bg-hover: #5b2fe0;
  --button-primary-edge: #4521b0;
  --button-primary-text: #ffffff;
  /* option / chip */
  --option-default-bg: #ffffff;
  --option-default-edge: #e2e2e6;
  --option-selected-bg: #f7f3ff;
  --option-selected-edge: #c2a8ff;
  --option-selected-indicator: #7b4dff;
  --chip-bg: #ffffff;
  --scrim: rgba(15, 15, 20, 0.5);
  /* feedback, streak, progress (quiz) */
  --text-disabled: #b4b4ba;
  --success-soft: #e3f7e6; --success-edge: #8fd3a1; --success-icon: #2fa84f; --success-text: #1f7a38; --success-fill: #3dbe5e; --success-fill-edge: #2a9a47;
  --danger-soft: #ffe6e1; --danger-edge: #f2a394; --danger-icon: #e8452c; --danger-text: #b5321c;
  --streak-off-soft: #e6e6ea; --streak-off-icon: #b4b4ba; --streak-warm-soft: #ffebd6; --streak-warm-icon: #f2994a; --streak-hot-soft: #ffe6e1; --streak-hot-icon: #e8452c;
  --progress-track: #e6e6ea; --progress-label: #1b1c1f;
  --glow: rgba(255, 199, 107, 0.55);
  --info-soft: #eef4ff; --info-icon: #2f6bff;

  /* layout */
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px;
  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-3xl: 32px; --radius-full: 999px;
  --stroke-edge: 2px;

  /* typography */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-arabic: "Amiri Quran", "Amiri", serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #111214; --bg-surface: #1b1c1f; --bg-surface-raised: #25262a; --bg-hover: #2c2d31; --bg-pressed: #1b1c1f;
    --text-primary: #f4f4f5; --text-secondary: #b4b4ba; --text-muted: #9a9aa0;
    --border-default: #2c2d31; --border-edge: #3a3b40; --border-edge-hover: #46474d; --border-focus: #7aa2ff;
    --badge-violet-soft: #29233f; --badge-violet-fill: #8a63ff; --badge-violet-text: #a98bff;
    --reward-xp-soft: #39301c; --reward-xp-icon: #f0c04a; --reward-xp-text: #f0c04a;
    --button-bg: #25262a; --button-bg-hover: #2c2d31; --button-bg-pressed: #1b1c1f; --button-edge: #3a3b40; --button-edge-hover: #46474d; --button-text: #f4f4f5;
    --button-primary-bg: #8a63ff; --button-primary-bg-hover: #a98bff; --button-primary-edge: #5b2fe0;
    --option-default-bg: #25262a; --option-default-edge: #3a3b40;
    --option-selected-bg: #29233f; --option-selected-edge: #5b2fe0; --option-selected-indicator: #8a63ff;
    --chip-bg: #1b1c1f; --scrim: rgba(0, 0, 0, 0.6);
    --text-disabled: #55565c;
    --success-soft: #1e3126; --success-edge: #1f7a38; --success-icon: #6ccb82; --success-text: #6ccb82;
    --danger-soft: #3a2221; --danger-edge: #9a3a2a; --danger-icon: #f28a76; --danger-text: #f28a76;
    --streak-off-soft: #25262a; --streak-off-icon: #55565c; --streak-warm-soft: #3a2a1c; --streak-hot-soft: #3a2221;
    --progress-track: #2c2d31; --progress-label: #f4f4f5;
    --glow: rgba(240, 170, 70, 0.28);
    --info-soft: #1d2740; --info-icon: #7aa2ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-canvas: #111214; --bg-surface: #1b1c1f; --bg-surface-raised: #25262a; --bg-hover: #2c2d31; --bg-pressed: #1b1c1f;
  --text-primary: #f4f4f5; --text-secondary: #b4b4ba; --text-muted: #9a9aa0;
  --border-default: #2c2d31; --border-edge: #3a3b40; --border-edge-hover: #46474d; --border-focus: #7aa2ff;
  --badge-violet-soft: #29233f; --badge-violet-fill: #8a63ff; --badge-violet-text: #a98bff;
  --reward-xp-soft: #39301c; --reward-xp-icon: #f0c04a; --reward-xp-text: #f0c04a;
  --button-bg: #25262a; --button-bg-hover: #2c2d31; --button-bg-pressed: #1b1c1f; --button-edge: #3a3b40; --button-edge-hover: #46474d; --button-text: #f4f4f5;
  --button-primary-bg: #8a63ff; --button-primary-bg-hover: #a98bff; --button-primary-edge: #5b2fe0;
  --option-default-bg: #25262a; --option-default-edge: #3a3b40;
  --option-selected-bg: #29233f; --option-selected-edge: #5b2fe0; --option-selected-indicator: #8a63ff;
  --chip-bg: #1b1c1f; --scrim: rgba(0, 0, 0, 0.6);
  --text-disabled: #55565c;
  --success-soft: #1e3126; --success-edge: #1f7a38; --success-icon: #6ccb82; --success-text: #6ccb82;
  --danger-soft: #3a2221; --danger-edge: #9a3a2a; --danger-icon: #f28a76; --danger-text: #f28a76;
  --streak-off-soft: #25262a; --streak-off-icon: #55565c; --streak-warm-soft: #3a2a1c; --streak-hot-soft: #3a2221;
  --progress-track: #2c2d31; --progress-label: #f4f4f5;
  --glow: rgba(240, 170, 70, 0.28);
  --info-soft: #1d2740; --info-icon: #7aa2ff;
  color-scheme: dark;
}