/* ============================================
   JSONLab - Theme Variables (Google Material Design Style)
   ============================================ */

:root {
  /* Brand colors — Google signature blue */
  --brand-primary: #1a73e8;
  --brand-primary-hover: #1557b0;
  --brand-secondary: #8ab4f8;
  --brand-accent: #34a853;
  --brand-gradient: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(26,115,232,0.04) 0%, rgba(66,133,244,0.04) 100%);

  --brand-glow: 0 1px 2px 0 rgba(60,64,67,0.1), 0 2px 6px 2px rgba(60,64,67,0.05);
  --brand-glow-strong: 0 1px 3px 0 rgba(60,64,67,0.2), 0 4px 8px 3px rgba(60,64,67,0.1);

  /* Light theme — Google Clean White & Greys */
  --bg-primary: #f8f9fa;
  --bg-secondary: #f1f3f4;
  --bg-tertiary: #e8eaed;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-code: #f8f9fa;
  --bg-hover: rgba(60, 64, 67, 0.04);
  --bg-selected: rgba(26, 115, 232, 0.08);
  --bg-overlay: rgba(32, 33, 36, 0.6);
  --bg-sidebar: #ffffff;
  --bg-sidebar-glass: rgba(255, 255, 255, 0.75);
  --bg-rightbar: #ffffff;
  --bg-card: #ffffff;
  --bg-surface: #f1f3f4;

  /* Text — Google Grey 900 / 700 / 500 */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #70757a;
  --text-inverse: #ffffff;
  --text-link: #1a73e8;
  --text-link-hover: #1557b0;
  --text-muted: #9aa0a6;

  /* Borders — Google Standard border colors */
  --border-primary: #dadce0;
  --border-secondary: #bdc1c6;
  --border-focus: #1a73e8;

  /* Syntax highlighting — Google Developers Console style */
  --syntax-key: #1a73e8;
  --syntax-string: #137333;
  --syntax-number: #b06000;
  --syntax-boolean: #a142f4;
  --syntax-null: #5f6368;
  --syntax-punctuation: #202124;
  --syntax-property: #1967d2;

  /* Status colors — Google alert styles */
  --success: #137333;
  --success-bg: #e6f4ea;
  --success-border: #ceead6;
  --warning: #b06000;
  --warning-bg: #fef7e0;
  --warning-border: #fde293;
  --error: #c5221f;
  --error-bg: #fce8e6;
  --error-border: #f5c6c2;
  --info: #1a73e8;
  --info-bg: #e8f0fe;
  --info-border: #c2d7f7;

  /* Category colors mapped to Google palette */
  --cat-core: #1a73e8;       /* Blue */
  --cat-view: #1aa2c4;       /* Cyan */
  --cat-convert: #137333;    /* Green */
  --cat-edit: #e37400;       /* Orange */
  --cat-search: #a142f4;     /* Purple */
  --cat-schema: #12b5cb;     /* Teal */
  --cat-compare: #f9ab00;    /* Yellow */
  --cat-query: #a142f4;      /* Purple */
  --cat-analyze: #e37400;    /* Orange */
  --cat-security: #d93025;   /* Red */
  --cat-share: #1a73e8;      /* Blue */
  --cat-repair: #137333;     /* Green */

  /* Shadows — Google standard product elevations */
  --shadow-sm: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  --shadow-md: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
  --shadow-lg: 0 4px 5px 0 rgba(60,64,67,0.15), 0 8px 10px 1px rgba(60,64,67,0.15);
  --shadow-xl: 0 8px 10px 1px rgba(60,64,67,0.15), 0 16px 24px 2px rgba(60,64,67,0.15);
  --shadow-2xl: 0 16px 24px 2px rgba(60,64,67,0.15), 0 24px 38px 3px rgba(60,64,67,0.15);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius — Material You rounded specifications */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-height: 56px;
  --sidebar-width: 240px;
  --rightbar-width: 280px;
  --container-max: 1400px;
  --container-narrow: 720px;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-command-palette: 1500;
}

/* ===== DARK THEME — Google Dark Theme Palette ===== */
[data-theme="dark"] {
  /* Google Dark grey backgrounds - high contrast */
  --bg-primary: #121212;
  --bg-secondary: #1f1f1f;
  --bg-tertiary: #2d2f31;
  --bg-elevated: #202124;
  --bg-input: #121212;
  --bg-code: #121212;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-selected: rgba(138, 180, 248, 0.16);
  --bg-overlay: rgba(0, 0, 0, 0.85);
  --bg-sidebar: #202124;
  --bg-sidebar-glass: rgba(30, 30, 30, 0.75);
  --bg-rightbar: #202124;
  --bg-card: #202124;
  --bg-surface: #202124;

  /* Text — Google Light grey text - high contrast */
  --text-primary: #ffffff;
  --text-secondary: #e8eaed;
  --text-tertiary: #b0b3b8;
  --text-inverse: #121212;
  --text-link: #8ab4f8;
  --text-link-hover: #aecbfa;
  --text-muted: #70757a;

  /* Borders — Google Dark border colors - high contrast */
  --border-primary: #4a4d51;
  --border-secondary: #70757a;
  --border-focus: #8ab4f8;

  /* Syntax highlighting — Google Developers Console Dark style */
  --syntax-key: #8ab4f8;
  --syntax-string: #81c995;
  --syntax-number: #fcad70;
  --syntax-boolean: #d7aefb;
  --syntax-null: #80868b;
  --syntax-punctuation: #e8eaed;
  --syntax-property: #c5a5fc;

  /* Status colors — Google Dark alerts */
  --success: #81c995;
  --success-bg: rgba(129, 201, 149, 0.12);
  --success-border: rgba(129, 201, 149, 0.24);
  --warning: #fdd663;
  --warning-bg: rgba(253, 214, 99, 0.12);
  --warning-border: rgba(253, 214, 99, 0.24);
  --error: #f28b82;
  --error-bg: rgba(242, 139, 130, 0.12);
  --error-border: rgba(242, 139, 130, 0.24);
  --info: #8ab4f8;
  --info-bg: rgba(138, 180, 248, 0.12);
  --info-border: rgba(138, 180, 248, 0.24);

  /* Shadows — Google Dark shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 5px 0 rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.2);
  --shadow-xl: 0 8px 10px 1px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.2);
  --shadow-2xl: 0 16px 24px 2px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.2);
}

/* System theme detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-primary: #121212;
    --bg-secondary: #1f1f1f;
    --bg-tertiary: #2d2f31;
    --bg-elevated: #202124;
    --bg-input: #121212;
    --bg-code: #121212;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-selected: rgba(138, 180, 248, 0.16);
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --bg-sidebar: #202124;
    --bg-sidebar-glass: rgba(30, 30, 30, 0.75);
    --bg-rightbar: #202124;
    --bg-card: #202124;
    --bg-surface: #202124;

    --text-primary: #ffffff;
    --text-secondary: #e8eaed;
    --text-tertiary: #b0b3b8;
    --text-inverse: #121212;
    --text-link: #8ab4f8;
    --text-link-hover: #aecbfa;
    --text-muted: #70757a;

    --border-primary: #4a4d51;
    --border-secondary: #70757a;
    --border-focus: #8ab4f8;

    --syntax-key: #8ab4f8;
    --syntax-string: #81c995;
    --syntax-number: #fcad70;
    --syntax-boolean: #d7aefb;
    --syntax-null: #80868b;
    --syntax-punctuation: #e8eaed;
    --syntax-property: #c5a5fc;

    --success: #81c995;
    --success-bg: rgba(129, 201, 149, 0.12);
    --success-border: rgba(129, 201, 149, 0.24);
    --warning: #fdd663;
    --warning-bg: rgba(253, 214, 99, 0.12);
    --warning-border: rgba(253, 214, 99, 0.24);
    --error: #f28b82;
    --error-bg: rgba(242, 139, 130, 0.12);
    --error-border: rgba(242, 139, 130, 0.24);
    --info: #8ab4f8;
    --info-bg: rgba(138, 180, 248, 0.12);
    --info-border: rgba(138, 180, 248, 0.24);

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 5px 0 rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.2);
    --shadow-xl: 0 8px 10px 1px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.2);
    --shadow-2xl: 0 16px 24px 2px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.2);
  }
}