/* tokens.css — MỌI con số thiết kế nằm ở đây. Màu lấy đúng theo 2 bảng phong cách (thiet-ke/bang-phong-cach_*.png).
   Thêm bản giao diện mới = thêm một khối [data-theme="..."], không sửa tệp khác. */

:root {
  /* chữ */
  --font-head: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Baloo 2', 'Nunito', system-ui, sans-serif;     /* số: 6/9 và 1/7 tách bạch */
  --font-fx:   'Baloo 2', 'Nunito', system-ui, sans-serif;     /* chữ hiệu ứng: CHÍ MẠNG, Combo… */

  --fs-xs: .8125rem;  --fs-sm: .9375rem;  --fs-md: 1.0625rem;  --fs-lg: 1.25rem;  --fs-xl: 1.625rem;  --fs-2xl: 2.125rem;

  /* khoảng cách */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* bo góc */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px;

  /* viền */
  --bw-1: 2px; --bw-2: 3px; --bw-3: 4px; --bw-4: 5px;

  /* tầng */
  --z-bg: 0; --z-content: 10; --z-fx: 20; --z-popup: 30; --z-cut: 40; --z-top: 50;

  /* chuyển động */
  --dur-fast: .15s; --dur-mid: .35s; --dur-slow: .7s;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-pop: cubic-bezier(.2, .9, .3, 1.25);
  --ease-impact: cubic-bezier(.2, 0, 0, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* huy chương — chung cho cả hai bản */
  --color-bronze: #C9773A; --color-bronze-2: #F4B780; --color-bronze-ink: #6B3410;
  --color-silver: #8FA3BD; --color-silver-2: #E6EDF6; --color-silver-ink: #3C4A60;
  --color-gold:   #FFB400; --color-gold-2:   #FFE680; --color-gold-ink:   #7A4A00;
  --color-diamond: #5FD0FF; --color-diamond-2: #EAFBFF; --color-diamond-3: #C4A6FF; --color-diamond-ink: #0E4A78;
  --color-lock:   #B9B4C6;

  /* chạm */
  --tap: 48px;
}

/* ============ BẢN DỄ THƯƠNG ============ */
:root,
[data-theme="cute"] {
  --color-primary: #FF5B8F;   --color-primary-dark: #D8356F;  --color-primary-soft: #FFD1E9;
  --color-secondary: #FFA78B; --color-accent: #FFD54F;        --color-accent-dark: #F2A500;
  --color-success: #7ED957;   --color-info: #5CC7FF;          --color-magic: #C08BFF;
  --color-surface: #FFF7E6;   --color-surface-2: #FFFFFF;
  --color-text: #3B2A6E;      --color-text-muted: #8777A8;    --color-ink: #2B1D5A;
  --color-outline: #FF8FBF;   --color-shadow: rgba(190, 60, 120, .28);
  --color-danger-soft: #FFB8C8;

  --bg-sky: linear-gradient(180deg, #7FD4FF 0%, #B9EBFF 38%, #E9F9FF 62%, #FFF1F8 100%);
  --bg-home: url("../assets/img/cute/nen_trang_chu.webp");  --bg-arena: url("../assets/img/cute/nen_dau_truong.webp");
  --bg-hill-back: #A9E58A;  --bg-hill-front: #7ED957;  --bg-cloud: #FFFFFF;
  --bg-ray: rgba(255, 255, 255, .5);  --bg-dot: #FFD54F;

  --btn-fill: linear-gradient(180deg, #FF8DB6 0%, #FF5B8F 55%, #F23F7C 100%);
  --btn-edge: #C22B66;  --btn-text: #FFFFFF;

  --ans-fill: linear-gradient(180deg, #FFFFFF 0%, #FFF0F7 100%);
  --ans-border: #FF9CC8;  --ans-edge: #EE7FB1;  --ans-text: #2B1D5A;
  --q-border: #FFD54F;    --q-edge: #F2B92C;

  --fill-crit: linear-gradient(180deg, #FFF27A 0%, #FFC21A 55%, #FF8A00 100%);
  --stroke-crit: #C2261D;
  --fill-dmg: linear-gradient(180deg, #FF5A4D 0%, #E0161C 100%);
  --stroke-dmg: #FFFFFF;  --halo-dmg: #8E0E15;
  --fill-combo: linear-gradient(180deg, #FFE96B 0%, #FFB400 100%);
  --stroke-combo: #E0338C;
  --fill-title: linear-gradient(180deg, #FFFFFF 0%, #FFE9F3 100%);
  --stroke-title: #E0338C;
  --fill-skill: linear-gradient(180deg, #FFF27A 0%, #FFB400 100%);
  --stroke-skill: #A0237A;

  --color-rage: linear-gradient(90deg, #FF4FB0 0%, #FF9F1C 60%, #FFE14D 100%);
  --color-energy: linear-gradient(180deg, #FF7A6B 0%, #F0232B 100%);
  --color-energy-ring: #5CC7FF;
  --burst-a: #FFE14D; --burst-b: #FF8A2A; --burst-c: #FF4B5C;

  --radius-card: var(--radius-lg);
  --fx-skew: 0deg;
  --font-fx: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

/* ============ BẢN ANIME ============ */
[data-theme="anime"] {
  --color-primary: #FF3B5C;   --color-primary-dark: #C4173F;  --color-primary-soft: #FFD3DC;
  --color-secondary: #FF7EB6; --color-accent: #FFD64D;        --color-accent-dark: #EFA200;
  --color-success: #2ECCB0;   --color-info: #3EC5FF;          --color-magic: #B46BFF;
  --color-surface: #FFF7E8;   --color-surface-2: #FFFFFF;
  --color-text: #232F7A;      --color-text-muted: #6A74AD;    --color-ink: #18205E;
  --color-outline: #2A3B8F;   --color-shadow: rgba(26, 36, 110, .32);
  --color-danger-soft: #FFB3C0;

  --bg-sky: linear-gradient(180deg, #5FA8FF 0%, #A9D4FF 34%, #FFD9EC 68%, #FFEFF6 100%);
  --bg-home: url("../assets/img/anime/nen_trang_chu.webp");  --bg-arena: url("../assets/img/anime/nen_dau_truong.webp");
  --bg-hill-back: #FFB7D5;  --bg-hill-front: #FF8FBF;  --bg-cloud: #FFFFFF;
  --bg-ray: rgba(255, 255, 255, .42);  --bg-dot: #FF7EB6;

  --btn-fill: linear-gradient(180deg, #FF7A8F 0%, #FF3B5C 55%, #E11E48 100%);
  --btn-edge: #A8103A;  --btn-text: #FFFFFF;

  --ans-fill: linear-gradient(180deg, #FFFFFF 0%, #DDF3FF 100%);
  --ans-border: #2AA4F4;  --ans-edge: #1877CC;  --ans-text: #18205E;
  --q-border: #FFD64D;    --q-edge: #F0A91F;

  --fill-crit: linear-gradient(180deg, #FFF56B 0%, #FFC400 50%, #FF7A00 100%);
  --stroke-crit: #B5121B;
  --fill-dmg: linear-gradient(180deg, #FF6A5A 0%, #E4132A 100%);
  --stroke-dmg: #FFFFFF;  --halo-dmg: #7A0A1E;
  --fill-combo: linear-gradient(180deg, #8FE3FF 0%, #2E8BFF 100%);
  --stroke-combo: #18205E;
  --fill-title: linear-gradient(180deg, #FFFFFF 0%, #FFF3B8 100%);
  --stroke-title: #D4174A;
  --fill-skill: linear-gradient(180deg, #FFF27A 0%, #FFB400 100%);
  --stroke-skill: #2A1F7A;

  --color-rage: linear-gradient(90deg, #FF3B5C 0%, #FF9F1C 60%, #FFD64D 100%);
  --color-energy: linear-gradient(180deg, #FF6B6B 0%, #E0142E 100%);
  --color-energy-ring: #3EC5FF;
  --burst-a: #FFF07A; --burst-b: #FFB000; --burst-c: #FF3B5C;

  --radius-card: var(--radius-md);
  --fx-skew: -8deg;
  --font-fx: 'Bangers', 'Baloo 2', system-ui, sans-serif;
}