/* ========================================
   WorldTool - Design Tokens
   Unified CSS variable system
   ======================================== */

:root {
  /* === TYPOGRAPHY === */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;
  --font-3xl: 24px;
  --font-4xl: 28px;
  --font-5xl: 32px;
  --font-6xl: 36px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --line-tight: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.625;

  /* === SPACING SCALE === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === RADIUS === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-full: 50%;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 20px -6px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 18px 30px -8px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 45px -15px rgba(0, 0, 0, 0.15);
  --shadow-inset: inset 0 1px 0 rgba(209, 213, 219, 0.15);

  /* === TRANSITIONS === */
  --transition-fast: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-base: 150ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slow: 300ms cubic-bezier(0.33, 1, 0.68, 1);

  /* === Z-INDEX === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 1400;
  --z-toast: 500;
}

/* ========================================
   DEFAULT THEME - LIGHT APPEARANCE
   ======================================== */
:root,
:root[data-theme="default"][data-appearance="light"] {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-canvas: #fafbfc;

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;

  /* Borders */
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-subtle: #f1f5f9;

  /* Accent */
  --accent-fg: #667eea;
  --accent-hover: #5568d3;
  --accent-bg: #eef2ff;
  --accent-subtle: #dbeafe;

  /* Success */
  --success-fg: #10b981;
  --success-hover: #059669;
  --success-bg: #d1fae5;
  --success-subtle: #ecfdf5;

  /* Attention */
  --attention-fg: #f59e0b;
  --attention-hover: #d97706;
  --attention-bg: #fef3c7;
  --attention-subtle: #fffbeb;

  /* Danger */
  --danger-fg: #ef4444;
  --danger-hover: #dc2626;
  --danger-bg: #fee2e2;
  --danger-subtle: #fef2f2;

  /* Info */
  --info-fg: #8b5cf6;
  --info-hover: #7c3aed;
  --info-bg: #ede9fe;
  --info-subtle: #f5f3ff;

  /* Components */
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --modal-bg: #ffffff;
}

/* ========================================
   DEFAULT THEME - DARK APPEARANCE
   ======================================== */
:root[data-theme="default"][data-appearance="dark"],
html.theme-dark,
.theme-dark {
  /* Backgrounds */
  --bg-primary: #1e293b;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-canvas: #1a1511;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;
  --text-muted: #475569;

  /* Borders */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-subtle: #2d2822;

  /* Accent */
  --accent-fg: #818cf8;
  --accent-hover: #6366f1;
  --accent-bg: #312e81;
  --accent-subtle: #2a2f4d;

  /* Success */
  --success-fg: #34d399;
  --success-hover: #10b981;
  --success-bg: #1e3d32;
  --success-subtle: #064e3b;

  /* Attention */
  --attention-fg: #fbbf24;
  --attention-hover: #f59e0b;
  --attention-bg: #3d3020;
  --attention-subtle: #451a03;

  /* Danger */
  --danger-fg: #f87171;
  --danger-hover: #ef4444;
  --danger-bg: #3d2824;
  --danger-subtle: #450a0a;

  /* Info */
  --info-fg: #a78bfa;
  --info-hover: #8b5cf6;
  --info-bg: #2e2639;
  --info-subtle: #1e1b4b;

  /* Components */
  --card-bg: #1e293b;
  --card-border: #334155;
  --input-bg: #1e293b;
  --input-border: #334155;
  --modal-bg: #1e293b;

  /* Shadows adapted */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 10px 16px -4px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 18px 28px -6px rgba(0, 0, 0, 0.38);
  --shadow-2xl: 0 24px 42px -10px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(61, 53, 41, 0.18);
}

/* ========================================
   FOREST THEME - LIGHT APPEARANCE
   ======================================== */
:root[data-theme="forest"][data-appearance="light"] {
  --bg-primary: #fdfaf4;
  --bg-secondary: #f6f3ea;
  --bg-tertiary: #edf4ee;
  --bg-canvas: #f4faf4;

  --text-primary: #1f2a1c;
  --text-secondary: #4b5a46;
  --text-tertiary: #7a8874;
  --text-muted: #a8b7a0;

  --border-primary: #d9e5d6;
  --border-secondary: #c4d4c3;
  --border-subtle: #edf4ee;

  --accent-fg: #2f855a;
  --accent-hover: #276749;
  --accent-bg: #e6f4ec;
  --accent-subtle: #ccebd9;

  --success-fg: #2f855a;
  --success-hover: #276749;
  --success-bg: #def9ea;
  --success-subtle: #c3eed9;

  --attention-fg: #d97706;
  --attention-hover: #b45309;
  --attention-bg: #fff4d6;
  --attention-subtle: #ffe6b0;

  --danger-fg: #c53030;
  --danger-hover: #9b2c2c;
  --danger-bg: #fde2e2;
  --danger-subtle: #fbd5d5;

  --info-fg: #0d9488;
  --info-hover: #0f766e;
  --info-bg: #e0f7f3;
  --info-subtle: #c7efeb;

  --card-bg: #ffffff;
  --card-border: #dfe9dd;
  --input-bg: #ffffff;
  --input-border: #dfe9dd;
  --modal-bg: #ffffff;
}

/* ========================================
   FOREST THEME - DARK APPEARANCE
   ======================================== */
:root[data-theme="forest"][data-appearance="dark"] {
  --bg-primary: #101c16;
  --bg-secondary: #0c150f;
  --bg-tertiary: #1c2a22;
  --bg-canvas: #07120b;

  --text-primary: #f1f7f3;
  --text-secondary: #c5d5c9;
  --text-tertiary: #8aa394;
  --text-muted: #5f6f63;

  --border-primary: #1f3128;
  --border-secondary: #2d4436;
  --border-subtle: #142119;

  --accent-fg: #6ee7b7;
  --accent-hover: #34d399;
  --accent-bg: #143826;
  --accent-subtle: #0f291c;

  --success-fg: #6ee7b7;
  --success-hover: #34d399;
  --success-bg: #123224;
  --success-subtle: #0c2319;

  --attention-fg: #f7b948;
  --attention-hover: #d68a1f;
  --attention-bg: #3f2a13;
  --attention-subtle: #2b1a09;

  --danger-fg: #f87171;
  --danger-hover: #ef4444;
  --danger-bg: #381a1a;
  --danger-subtle: #2a1111;

  --info-fg: #5eead4;
  --info-hover: #2dd4bf;
  --info-bg: #123336;
  --info-subtle: #0c2224;

  --card-bg: #142219;
  --card-border: #223629;
  --input-bg: #142219;
  --input-border: #223629;
  --modal-bg: #142219;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 16px -4px rgba(0, 0, 0, 0.36);
  --shadow-xl: 0 18px 28px -6px rgba(0, 0, 0, 0.42);
  --shadow-2xl: 0 24px 42px -10px rgba(0, 0, 0, 0.48);
  --shadow-inset: inset 0 1px 0 rgba(15, 24, 19, 0.45);
}

/* ========================================
   NOCTURNE THEME - LIGHT APPEARANCE
   ======================================== */
:root[data-theme="nocturne"][data-appearance="light"] {
  --bg-primary: #fef6f4;
  --bg-secondary: #f3e7e3;
  --bg-tertiary: #e7d9d3;
  --bg-canvas: #fbf1ed;

  --text-primary: #1c1613;
  --text-secondary: #403937;
  --text-tertiary: #776c64;
  --text-muted: #b49f94;

  --border-primary: #e0cec7;
  --border-secondary: #d2beb7;
  --border-subtle: #f6ece8;

  --accent-fg: #f45d48;
  --accent-hover: #d84c3b;
  --accent-bg: #fde0db;
  --accent-subtle: #fef1ee;

  --success-fg: #f7b801;
  --success-hover: #d99c00;
  --success-bg: #fff2cc;
  --success-subtle: #fff8e1;

  --attention-fg: #f9844a;
  --attention-hover: #de6f36;
  --attention-bg: #ffe0d1;
  --attention-subtle: #fff2ea;

  --danger-fg: #d7263d;
  --danger-hover: #b91d30;
  --danger-bg: #ffe0e6;
  --danger-subtle: #fff0f3;

  --info-fg: #5e4ae3;
  --info-hover: #4a39c6;
  --info-bg: #e7e3ff;
  --info-subtle: #f2f0ff;

  --card-bg: #ffffff;
  --card-border: #e0cec7;
  --input-bg: #ffffff;
  --input-border: #e0cec7;
  --modal-bg: #ffffff;
}

/* ========================================
   NOCTURNE THEME - DARK APPEARANCE
   ======================================== */
:root[data-theme="nocturne"][data-appearance="dark"] {
  --bg-primary: #1a1613;
  --bg-secondary: #221d1a;
  --bg-tertiary: #2c2521;
  --bg-canvas: #120f0d;

  --text-primary: #fef6f4;
  --text-secondary: #dccfca;
  --text-tertiary: #b49f94;
  --text-muted: #8e7c73;

  --border-primary: #3b312c;
  --border-secondary: #4b413c;
  --border-subtle: #271f1c;

  --accent-fg: #ff8a73;
  --accent-hover: #ff7058;
  --accent-bg: #3b1f18;
  --accent-subtle: #2b1510;

  --success-fg: #ffd164;
  --success-hover: #ffbb1c;
  --success-bg: #3b290b;
  --success-subtle: #251a08;

  --attention-fg: #ff9b5e;
  --attention-hover: #ff8540;
  --attention-bg: #3a1e15;
  --attention-subtle: #2a140d;

  --danger-fg: #ff5c70;
  --danger-hover: #ff4059;
  --danger-bg: #3a0f18;
  --danger-subtle: #2a0a11;

  --info-fg: #b3adff;
  --info-hover: #9891ff;
  --info-bg: #2b253f;
  --info-subtle: #1f1a2e;

  --card-bg: #201a17;
  --card-border: #352b26;
  --input-bg: #201a17;
  --input-border: #352b26;
  --modal-bg: #201a17;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.65);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  --shadow-inset: inset 0 1px 0 rgba(25, 18, 15, 0.6);
}

/* ========================================
   CANDY THEME - LIGHT APPEARANCE
   ======================================== */
:root[data-theme="candy"][data-appearance="light"] {
  --bg-primary: #fef6e4;
  --bg-secondary: #f9f4ef;
  --bg-tertiary: #f3d2c1;
  --bg-canvas: #fffffe;

  --text-primary: #2b2c34;
  --text-secondary: #55423d;
  --text-tertiary: #8c7851;
  --text-muted: #eaddcf;

  --border-primary: #f0e0d2;
  --border-secondary: #e6cfc0;
  --border-subtle: #fdf1e7;

  --accent-fg: #ef4565;
  --accent-hover: #d9376e;
  --accent-bg: #fec7d7;
  --accent-subtle: #ffe4ec;

  --success-fg: #2cb67d;
  --success-hover: #1f8f63;
  --success-bg: #c3f0ca;
  --success-subtle: #e7fbed;

  --attention-fg: #faae2b;
  --attention-hover: #ff8e3c;
  --attention-bg: #ffe7c2;
  --attention-subtle: #fff4df;

  --danger-fg: #e53170;
  --danger-hover: #cf1e5b;
  --danger-bg: #ffd2e2;
  --danger-subtle: #ffe8f1;

  --info-fg: #3da9fc;
  --info-hover: #1d8fe7;
  --info-bg: #d8eefe;
  --info-subtle: #edf6ff;

  --card-bg: #ffffff;
  --card-border: #f0e0d2;
  --input-bg: #ffffff;
  --input-border: #f0e0d2;
  --modal-bg: #ffffff;
}

/* ========================================
   CANDY THEME - DARK APPEARANCE
   ======================================== */
:root[data-theme="candy"][data-appearance="dark"] {
  --bg-primary: #232946;
  --bg-secondary: #1f2138;
  --bg-tertiary: #2b2c34;
  --bg-canvas: #161729;

  --text-primary: #fef6e4;
  --text-secondary: #f3d2c1;
  --text-tertiary: #d9bfa6;
  --text-muted: #a08d7d;

  --border-primary: #3b3d57;
  --border-secondary: #4b4d68;
  --border-subtle: #1b1c2b;

  --accent-fg: #ff708c;
  --accent-hover: #ff5470;
  --accent-bg: #3b1824;
  --accent-subtle: #2a1019;

  --success-fg: #48d9a1;
  --success-hover: #2cb67d;
  --success-bg: #163229;
  --success-subtle: #0f211c;

  --attention-fg: #ffb347;
  --attention-hover: #ff8e3c;
  --attention-bg: #362413;
  --attention-subtle: #24170b;

  --danger-fg: #ff5c8d;
  --danger-hover: #ff2f6d;
  --danger-bg: #351420;
  --danger-subtle: #240c16;

  --info-fg: #7fc4ff;
  --info-hover: #4fa5ff;
  --info-bg: #1b2a40;
  --info-subtle: #111b2b;

  --card-bg: #1f2138;
  --card-border: #303252;
  --input-bg: #1f2138;
  --input-border: #303252;
  --modal-bg: #1f2138;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 1px 0 rgba(19, 19, 28, 0.6);
}


/* === LEGACY COMPATIBILITY === */
:root {
  --primary-color: var(--accent-fg);
  --primary-hover: var(--accent-hover);
  --primary-bg: var(--accent-bg);
  --secondary-bg: var(--bg-secondary);
  --secondary-hover: var(--bg-tertiary);
  --danger-color: var(--danger-fg);
  --success-color: var(--success-fg);
  --warning-color: var(--attention-fg);
  --border-color: var(--border-primary);
}

/* ========================================
   THEME PREVIEW TOKENS
   ======================================== */
:root {
  --theme-preview-default-1: #667eea;
  --theme-preview-default-2: #4c51bf;
  --theme-preview-default-3: #e0e7ff;
  --theme-preview-default-dark-1: #0f172a;
  --theme-preview-default-dark-2: #1e293b;
  --theme-preview-default-dark-3: #312e81;

  --theme-preview-forest-1: #2f855a;
  --theme-preview-forest-2: #38a169;
  --theme-preview-forest-3: #c6f6d5;
  --theme-preview-forest-dark-1: #0c150f;
  --theme-preview-forest-dark-2: #1c2a22;
  --theme-preview-forest-dark-3: #34d399;

  --theme-preview-nocturne-1: #f45d48;
  --theme-preview-nocturne-2: #f7b801;
  --theme-preview-nocturne-3: #fef6f4;
  --theme-preview-nocturne-dark-1: #1a1613;
  --theme-preview-nocturne-dark-2: #2c2521;
  --theme-preview-nocturne-dark-3: #ff8a73;

  --theme-preview-candy-1: #ef4565;
  --theme-preview-candy-2: #3da9fc;
  --theme-preview-candy-3: #fef6e4;
  --theme-preview-candy-dark-1: #232946;
  --theme-preview-candy-dark-2: #2b2c34;
  --theme-preview-candy-dark-3: #ff708c;
}