/* =========================================================
   Theme Tokens
   Sweet-tech palette inspired by soft daisyUI themes,
   Catppuccin-like macarons, glass surfaces and glow motion.
   ========================================================= */
:root,
[data-ui-pack="sakura-signal"] {
  color-scheme: light;

  --primary-100: #FF5FA2;
  --primary-200: #FF8FC1;
  --secondary-100: #9B7CFF;
  --secondary-200: #C9B7FF;
  --accent-100: #FF9E57;
  --accent-200: #FFC98F;
  --accent-300: #74DDF2;
  --text-100: #2F2A35;
  --text-200: #6B6474;
  --bg-100: #FFF9F7;
  --bg-200: #FFF2F7;
  --bg-300: #F3ECF6;
  --glass-100: rgba(255, 255, 255, 0.58);
  --glass-200: rgba(255, 255, 255, 0.34);
  --line-100: rgba(255, 255, 255, 0.65);

  --success-100: #42D39B;
  --success-200: #DDFBED;
  --warning-100: #FFBD4A;
  --warning-200: #FFF0C8;
  --danger-100: #FF6F7D;
  --danger-200: #FFE2E8;
  --info-100: #55C7F7;
  --info-200: #DFF7FF;

  --surface-100: rgba(255, 255, 255, 0.72);
  --surface-200: rgba(255, 255, 255, 0.48);
  --surface-300: rgba(255, 249, 247, 0.9);
  --surface-solid: #FFFFFF;
  --surface-tint: #FFF6FB;
  --surface-violet: #F4EEFF;
  --surface-peach: #FFF0E3;
  --surface-sky: #ECFBFF;
  --border-soft: rgba(255, 255, 255, 0.78);
  --border-muted: rgba(154, 124, 255, 0.16);
  --shadow-color: 255 95 162;
  --shadow-soft: 0 18px 50px rgba(var(--shadow-color), 0.13);
  --shadow-card: 0 18px 55px rgba(93, 73, 114, 0.12);
  --shadow-lift: 0 26px 75px rgba(93, 73, 114, 0.18);
  --shadow-glow: 0 0 44px rgba(255, 95, 162, 0.22);
  --drop-glow: drop-shadow(0 18px 28px rgba(255, 95, 162, 0.2));

  --gradient-primary: linear-gradient(135deg, var(--primary-100) 0%, var(--secondary-100) 58%, var(--accent-300) 100%);
  --gradient-warm: linear-gradient(135deg, #FF8FC1 0%, #FFC98F 100%);
  --gradient-cool: linear-gradient(135deg, #C9B7FF 0%, #74DDF2 100%);
  --gradient-hero: radial-gradient(circle at 15% 15%, rgba(255, 143, 193, 0.45), transparent 31%),
    radial-gradient(circle at 80% 8%, rgba(116, 221, 242, 0.42), transparent 30%),
    radial-gradient(circle at 62% 82%, rgba(255, 201, 143, 0.38), transparent 34%),
    linear-gradient(145deg, #FFF9F7 0%, #FFF2F7 52%, #F3ECF6 100%);
  --gradient-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34));
  --gradient-border: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 143, 193, 0.4), rgba(116, 221, 242, 0.36));

  --font-sans: "Poppins", "Inter", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: "Poppins", "Inter", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 42px;
  --radius-pill: 999px;

  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container: 1180px;
  --container-wide: 1320px;
  --nav-height: 82px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 260ms var(--ease-out);
  --transition-slow: 520ms var(--ease-out);

  --blur-glass: 22px;
  --glass-saturate: 1.35;
  --ring: 0 0 0 4px rgba(255, 95, 162, 0.18);
}

[data-theme="sunset"],
[data-ui-pack="aurora-frost"] {
  --primary-100: #FF6F9D;
  --primary-200: #FFB1CA;
  --secondary-100: #8F7BFF;
  --secondary-200: #D5CAFF;
  --accent-100: #FF8D52;
  --accent-200: #FFD0A1;
  --accent-300: #62D3EF;
  --bg-100: #FFF7EF;
  --bg-200: #FFEFF4;
  --bg-300: #F2EAF7;
  --shadow-color: 255 111 157;
}

[data-ui-pack="midnight-matsuri"] {
  color-scheme: dark;

  --primary-100: #FF7DA8;
  --primary-200: #FFB5D1;
  --secondary-100: #7D8CFF;
  --secondary-200: #C3CBFF;
  --accent-100: #FFB06B;
  --accent-200: #FFD5A4;
  --accent-300: #69D0FF;
  --text-100: #F4F7FF;
  --text-200: #CBD4ED;
  --bg-100: #090F1C;
  --bg-200: #10192B;
  --bg-300: #17233A;
  --glass-100: rgba(20, 30, 52, 0.76);
  --glass-200: rgba(13, 20, 36, 0.56);
  --line-100: rgba(139, 163, 255, 0.22);

  --surface-100: rgba(21, 32, 54, 0.82);
  --surface-200: rgba(14, 22, 39, 0.68);
  --surface-300: rgba(18, 28, 48, 0.9);
  --surface-solid: #111A2D;
  --surface-tint: #17223B;
  --surface-violet: #1B2643;
  --surface-peach: #2C2330;
  --surface-sky: #152838;
  --border-soft: rgba(139, 163, 255, 0.24);
  --border-muted: rgba(125, 140, 255, 0.18);
  --shadow-color: 87 121 255;
  --shadow-soft: 0 18px 50px rgba(8, 13, 28, 0.38);
  --shadow-card: 0 20px 60px rgba(5, 10, 24, 0.48);
  --shadow-lift: 0 28px 78px rgba(4, 9, 21, 0.56);
  --shadow-glow: 0 0 44px rgba(125, 140, 255, 0.18);
  --drop-glow: drop-shadow(0 18px 28px rgba(125, 140, 255, 0.18));

  --gradient-primary: linear-gradient(135deg, var(--primary-100) 0%, var(--secondary-100) 54%, var(--accent-300) 100%);
  --gradient-warm: linear-gradient(135deg, #FF7DA8 0%, #FFB06B 100%);
  --gradient-cool: linear-gradient(135deg, #7D8CFF 0%, #69D0FF 100%);
  --gradient-hero: radial-gradient(circle at 15% 15%, rgba(255, 125, 168, 0.24), transparent 30%),
    radial-gradient(circle at 80% 8%, rgba(105, 208, 255, 0.22), transparent 28%),
    radial-gradient(circle at 62% 82%, rgba(255, 176, 107, 0.16), transparent 30%),
    linear-gradient(145deg, #090F1C 0%, #10192B 52%, #17233A 100%);
  --gradient-panel: linear-gradient(145deg, rgba(21, 32, 54, 0.88), rgba(12, 18, 32, 0.76));
  --gradient-border: linear-gradient(135deg, rgba(139, 163, 255, 0.3), rgba(255, 125, 168, 0.28), rgba(105, 208, 255, 0.24));
  --ring: 0 0 0 4px rgba(125, 140, 255, 0.2);
}

[data-density="compact"] {
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --radius-lg: 22px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms linear;
    --transition-base: 1ms linear;
    --transition-slow: 1ms linear;
  }
}