@import "tailwindcss";

@theme {
  --color-base: var(--kng-base);
  --color-surface: var(--kng-surface);
  --color-surface-hover: var(--kng-surface-hover);
  --color-border: var(--kng-border);
  
  --color-text-main: var(--kng-text);
  --color-text-muted: var(--kng-text-muted);
  
  --color-primary: var(--kng-primary);
  --color-primary-hover: var(--kng-primary-hover);
  
  --color-fuji: var(--kng-fuji);
  --color-sakura: var(--kng-sakura);
  --color-wave: var(--kng-wave);
  --color-autumn: var(--kng-autumn);
}

/* Kanagawa Colors */
:root {
  /* Default: Dark Mode */
  --kng-base: #1F1F28;
  --kng-surface: #2A2A37;
  --kng-surface-hover: #363646;
  --kng-border: #54546D;
  
  --kng-text: #DCD7BA;
  --kng-text-muted: #727169;
  
  --kng-primary: #7AA89F;
  --kng-primary-hover: #6B958D;
  
  --kng-fuji: #76946A;
  --kng-sakura: #D27E99;
  --kng-wave: #7FB4CA;
  --kng-autumn: #FFA066;
}

:root[data-theme="light"] {
  /* Kanagawa Lotus (Light Mode) */
  --kng-base: #F2ECBC;
  --kng-surface: #E5DCA4;
  --kng-surface-hover: #D5CEA3;
  --kng-border: #A6A69C;
  
  --kng-text: #545464;
  --kng-text-muted: #8A8980;
  
  --kng-primary: #4D696B;
  --kng-primary-hover: #435B5C;
  
  --kng-fuji: #6F894E;
  --kng-sakura: #B35B79;
  --kng-wave: #5A7785;
  --kng-autumn: #C4704B;
}

body {
  background-color: var(--kng-base);
  color: var(--kng-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}