/* CSS Variables & Theme Definitions (expanded) */

:root {
  --sidebar-width: 0px;
  /* Safe area insets */
  --safe-left: max(2vw, env(safe-area-inset-left, 0px));
  --safe-right: max(2vw, env(safe-area-inset-right, 0px));
  --safe-top: max(0px, env(safe-area-inset-top, 0px));
  --safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));

  /* Backgrounds (light) */
  --bg-primary: #f5f5f5;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #232323;
  --bg-overlay: #181a1b;

  /* Foregrounds */
  --fg-primary: #1e1e1e;
  --fg-secondary: #666666;
  --fg-accent: #ffe066;
  --fg-accent-hover: #fffbe6;
  --fg-danger: #d32f2f;

  /* Borders */
  --border-primary: #1e1e1e;
  --border-secondary: #bdc3c7;
  --border-accent: #4e8cff;

  /* Preview / search */
  --preview-bg: #ffffff;
  --preview-border: #dddddd;
  --search-highlight: #ffe066;

  /* Tag base colors */
  --tag-scape: #facc15;
  --tag-ss: #a855f7;
  --tag-ttrpg: #10b981;
  --tag-dev: #3b82f6;
  --dev-tag-bg: #5D3FD3;

  /* Buttons / chips */
  --btn-fg: #ffffff;
  --btn-hover-bg: #2566c7;
  --chip-fg-on-color: #ffffff;

  /* Wiki/content specific */
  --link-wiki-primary: #5D3FD3;
  --link-wiki-hover: #d7bde2;
  --success-color: #4ade80;
  --wiki-header-bg: #f7f3e9;
  --wiki-header-fg: #23232b;
  --wiki-header-border: #e6e3f7;
  --feathermark-bg: #23232b;
  --feathermark-fg: #f5f5f5;
  --feathermark-accent: #ffe066;
  --caption-color: #888;
  --blockquote-bg: rgba(240,240,240,0.7);
  --blockquote-border: #888;
  --pinned-link: #fff9b1;
  --pinned-link-hover: #ffe066;
  --pinned-heading: #ffe066;
  --pinned-btn-hover: #fffbe6;
  /* Ensure link + success + resizer tokens have light defaults (already set) */
  --link-wiki-primary: #5D3FD3;
  --link-wiki-hover: #d7bde2;
  --success-color: #4ade80;
  --resizer-handle: rgba(255,255,255,0.45);
  --resizer-handle-hover: rgba(255,255,255,0.9);
  --resizer-shadow: rgba(0,0,0,0.15);
  --resizer-shadow-hover: rgba(0,0,0,0.25);
  --resizer-shadow-glow: rgba(0,0,0,0.35);

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-full: 999px;

  /* Fluid spacing scale (clamp for responsive sizing) */
  --spacing-xs: clamp(2px, 0.125rem, 4px);
  --spacing-sm: clamp(4px, 0.25rem + 0.125vw, 6px);
  --spacing-md: clamp(8px, 0.5rem + 0.25vw, 12px);
  --spacing-lg: clamp(12px, 0.75rem + 0.5vw, 16px);
  --spacing-xl: clamp(16px, 1rem + 0.5vw, 20px);
  --spacing-2xl: clamp(18px, 1.125rem + 0.75vw, 24px);
  --spacing-3xl: clamp(24px, 1.5rem + 1vw, 32px);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(93,63,211,0.04);
  --shadow-md: 0 2px 8px rgba(93,63,211,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.45);
  --shadow-sidebar: 2px 0 16px rgba(0,0,0,0.12);

  /* Typography scale (fluid) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  --font-size-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem);
  --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Z-index scale */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 1000;
  --z-index-sidebar: 3005;
  /* Elevated above search dropdown (3002) so tag buttons remain clickable */
  --z-index-tag-filter: 3004;
  --z-index-navbar: 1002;
  --z-index-modal-backdrop: 3006;
  --z-index-preview: 2500;
  --z-index-auth-modal: 3007;
  --z-index-search-dropdown: 3002;
  --z-index-frame: 99999;

  /* Transition timing & easing */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;
  --transition-slower: 0.4s;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-sidebar: cubic-bezier(0.4, 0, 0.2, 1);

  /* Component dimensions */
  --navbar-height: 56px;
  --navbar-height-search-active: 320px;
  --sidebar-width-default: 260px;
  --sidebar-width-max: 500px;
  --sidebar-top-offset: 104px;
  --content-padding-top: 104px;
  --button-height: 44px;
  --button-height-sm: 40px;
  --input-height: 40px;
  --resizer-width: 8px;
  --resizer-handle-size: 3px;
  --resizer-handle-length: 42px;

  /* Container query breakpoints */
  --container-xs: 320px;
  --container-sm: 480px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Overlay & transparency tokens */
  --overlay-dark: rgba(0,0,0,0.55);
  --overlay-light: rgba(255,255,255,0.05);
  --border-subtle: rgba(255,255,255,0.08);
  --shadow-inset: rgba(0,0,0,0.35);
  --resizer-handle: rgba(255,255,255,0.45);
  --resizer-handle-hover: rgba(255,255,255,0.9);
  --resizer-shadow: rgba(0,0,0,0.15);
  --resizer-shadow-hover: rgba(0,0,0,0.25);
  --resizer-shadow-glow: rgba(0,0,0,0.35);
  --badge-bg-subtle: rgba(0,0,0,0.06);

  /* Tag gradients & badge backgrounds */
  --tag-scape-gradient: linear-gradient(to right, rgba(250,204,21,0.08), rgba(250,204,21,0.02));
  --tag-ss-gradient: linear-gradient(to right, rgba(168,85,247,0.10), rgba(168,85,247,0.03));
  --tag-ttrpg-gradient: linear-gradient(to right, rgba(16,185,129,0.10), rgba(16,185,129,0.03));
  --tag-dev-gradient: linear-gradient(to right, rgba(59,130,246,0.12), rgba(59,130,246,0.04));
  --tag-badge-scape-bg: rgba(250,204,21,0.2);
  --tag-badge-ss-bg: rgba(168,85,247,0.2);
  --tag-badge-ttrpg-bg: rgba(16,185,129,0.2);
  --tag-badge-dev-bg: rgba(59,130,246,0.2);
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #121212;
  --bg-tertiary: #232323;
  --bg-overlay: #181a1b;

  --fg-primary: #e8e8e8;
  --fg-secondary: #aaaaaa;
  --fg-accent: #ffd75e;
  --fg-accent-hover: #fff199;
  --fg-danger: #ff6b6b;

  --border-primary: #444444;
  --border-secondary: #555555;
  --border-accent: #6da2ff;

  --preview-bg: #181828;
  --preview-border: #444444;
  --search-highlight: #ffe066;
  --tag-scape: #facc15;
  --tag-ss: #a855f7;
  --tag-ttrpg: #10b981;
  --tag-dev: #3b82f6;
  --dev-tag-bg: #7a5be6;
  --btn-fg: #ffffff;
  --btn-hover-bg: #2a6ee0;
  --chip-fg-on-color: #ffffff;

  /* Dark wiki/content overrides */
  --wiki-header-bg: #2a2a30;
  --wiki-header-fg: #e8e8e8;
  --wiki-header-border: #444a55;
  --feathermark-bg: #1e1e24;
  --feathermark-fg: #e5e5e5;
  --feathermark-accent: #ffd75e;
  --caption-color: #888;
  --blockquote-bg: rgba(60,60,60,0.55);
  --blockquote-border: #666;
  --pinned-link: #ffe066;
  --pinned-link-hover: #fff199;
  --pinned-heading: #ffd75e;
  --pinned-btn-hover: #fff199;
  /* Dark theme explicit overrides for newly referenced tokens */
  --link-wiki-primary: #b9a6ff;
  --link-wiki-hover: #d9caff;
  --success-color: #4ade80;
  --resizer-handle: rgba(255,255,255,0.45);
  --resizer-handle-hover: rgba(255,255,255,0.85);
  --resizer-shadow: rgba(0,0,0,0.4);
  --resizer-shadow-hover: rgba(0,0,0,0.55);
  --resizer-shadow-glow: rgba(0,0,0,0.65);
  --badge-bg-subtle: rgba(255,255,255,0.08);
  --tag-badge-scape-bg: rgba(250,204,21,0.28);
  --tag-badge-ss-bg: rgba(168,85,247,0.28);
  --tag-badge-ttrpg-bg: rgba(16,185,129,0.28);
  --tag-badge-dev-bg: rgba(59,130,246,0.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1a1a1a;
    --bg-secondary: #121212;
    --bg-tertiary: #232323;
    --bg-overlay: #181a1b;

    --fg-primary: #e8e8e8;
    --fg-secondary: #aaaaaa;
    --fg-accent: #ffd75e;
    --fg-accent-hover: #fff199;
    --fg-danger: #ff6b6b;

    --border-primary: #444444;
    --border-secondary: #555555;
    --border-accent: #6da2ff;

    --preview-bg: #181828;
    --preview-border: #444444;
    --search-highlight: #ffe066;
    --tag-scape: #facc15;
    --tag-ss: #a855f7;
    --tag-ttrpg: #10b981;
    --tag-dev: #3b82f6;
    --dev-tag-bg: #7a5be6;
    --wiki-header-bg: #2a2a30;
    --wiki-header-fg: #e8e8e8;
    --wiki-header-border: #444a55;
    --feathermark-bg: #1e1e24;
    --feathermark-fg: #e5e5e5;
    --feathermark-accent: #ffd75e;
    --caption-color: #888;
    --blockquote-bg: rgba(60,60,60,0.55);
    --blockquote-border: #666;
    --pinned-link: #ffe066;
    --pinned-link-hover: #fff199;
    --pinned-heading: #ffd75e;
    --pinned-btn-hover: #fff199;
    /* Dark-prefers-color-scheme overrides mirror [data-theme="dark"] for resilience */
    --link-wiki-primary: #b9a6ff;
    --link-wiki-hover: #d9caff;
    --success-color: #4ade80;
    --resizer-handle: rgba(255,255,255,0.45);
    --resizer-handle-hover: rgba(255,255,255,0.85);
    --resizer-shadow: rgba(0,0,0,0.4);
    --resizer-shadow-hover: rgba(0,0,0,0.55);
    --resizer-shadow-glow: rgba(0,0,0,0.65);
    --badge-bg-subtle: rgba(255,255,255,0.08);
    --tag-badge-scape-bg: rgba(250,204,21,0.28);
    --tag-badge-ss-bg: rgba(168,85,247,0.28);
    --tag-badge-ttrpg-bg: rgba(16,185,129,0.28);
    --tag-badge-dev-bg: rgba(59,130,246,0.30);
  }
}