@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@font-face {
  font-family: "IBMPlexSansCN";
  src: url("./assets/fonts/IBMPlexSansCN.variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBMPlexMonoCN";
  src: url("./assets/fonts/IBMPlexMonoCN.variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@theme static {
  --color-white: #ffffff;
  --color-black: #000000;

  --color-brand-10: #fff0f6;
  --color-brand-20: #ffd6e8;
  --color-brand-30: #ffadd1;
  --color-brand-40: #f76aa7;
  --color-brand-50: #d83d82;
  --color-brand-60: #b31b5d;
  --color-brand-70: #8f1248;
  --color-brand-80: #681036;
  --color-brand-90: #3f0b22;
  --color-brand-100: #240512;

  --color-gray-10: #f4f4f4;
  --color-gray-20: #e0e0e0;
  --color-gray-30: #c6c6c6;
  --color-gray-40: #a8a8a8;
  --color-gray-50: #8d8d8d;
  --color-gray-60: #6f6f6f;
  --color-gray-70: #525252;
  --color-gray-80: #393939;
  --color-gray-90: #262626;
  --color-gray-100: #161616;

  --color-blue-10: #edf5ff;
  --color-blue-20: #d0e2ff;
  --color-blue-30: #a6c8ff;
  --color-blue-40: #78a9ff;
  --color-blue-50: #4589ff;
  --color-blue-60: #0f62fe;
  --color-blue-70: #0043ce;
  --color-blue-80: #002d9c;
  --color-blue-90: #001d6c;
  --color-blue-100: #001141;

  --color-cyan-10: #e5f6ff;
  --color-cyan-20: #bae6ff;
  --color-cyan-30: #82cfff;
  --color-cyan-40: #33b1ff;
  --color-cyan-50: #1192e8;
  --color-cyan-60: #0072c3;
  --color-cyan-70: #00539a;
  --color-cyan-80: #003a6d;
  --color-cyan-90: #012749;
  --color-cyan-100: #061727;

  --color-teal-10: #d9fbfb;
  --color-teal-20: #9ef0f0;
  --color-teal-30: #3ddbd9;
  --color-teal-40: #08bdba;
  --color-teal-50: #009d9a;
  --color-teal-60: #007d79;
  --color-teal-70: #005d5d;
  --color-teal-80: #004144;
  --color-teal-90: #022b30;
  --color-teal-100: #081a1c;

  --color-green-10: #defbe6;
  --color-green-20: #a7f0ba;
  --color-green-30: #6fdc8c;
  --color-green-40: #42be65;
  --color-green-50: #24a148;
  --color-green-60: #198038;
  --color-green-70: #0e6027;
  --color-green-80: #044317;
  --color-green-90: #022d0d;
  --color-green-100: #071908;

  --color-yellow-10: #fcf4d6;
  --color-yellow-20: #fddc69;
  --color-yellow-30: #f1c21b;
  --color-yellow-40: #d2a106;
  --color-yellow-50: #b28600;
  --color-yellow-60: #8e6a00;
  --color-yellow-70: #684e00;
  --color-yellow-80: #483700;
  --color-yellow-90: #302400;
  --color-yellow-100: #1c1500;

  --color-red-10: #fff1f1;
  --color-red-20: #ffd7d9;
  --color-red-30: #ffb3b8;
  --color-red-40: #ff8389;
  --color-red-50: #fa4d56;
  --color-red-60: #da1e28;
  --color-red-70: #a2191f;
  --color-red-80: #750e13;
  --color-red-90: #520408;
  --color-red-100: #2d0709;

  --color-magenta-10: #fff0f7;
  --color-magenta-20: #ffd6e8;
  --color-magenta-30: #ffafd2;
  --color-magenta-40: #ff7eb6;
  --color-magenta-50: #ee5396;
  --color-magenta-60: #d02670;
  --color-magenta-70: #9f1853;
  --color-magenta-80: #740937;
  --color-magenta-90: #510224;
  --color-magenta-100: #2a0a18;

  --color-purple-10: #f6f2ff;
  --color-purple-20: #e8daff;
  --color-purple-30: #d4bbff;
  --color-purple-40: #be95ff;
  --color-purple-50: #a56eff;
  --color-purple-60: #8a3ffc;
  --color-purple-70: #6929c4;
  --color-purple-80: #491d8b;
  --color-purple-90: #31135e;
  --color-purple-100: #1c0f30;

  --color-orange-10: #fff2e8;
  --color-orange-20: #ffd9be;
  --color-orange-30: #ffb784;
  --color-orange-40: #ff832b;
  --color-orange-50: #eb6200;
  --color-orange-60: #ba4e00;
  --color-orange-70: #8a3800;
  --color-orange-80: #5e2900;
  --color-orange-90: #3e1a00;
  --color-orange-100: #231000;

  --tracking-wide: 0;
  --tracking-wider: 0;
  --tracking-widest: 0;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.12);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.18);
}

@theme inline {
  --font-heading: var(--font-family-sans);
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-serif: var(--font-family-serif);

  --color-layer-01: var(--layer-01);
  --color-layer-02: var(--layer-02);
  --color-layer-03: var(--layer-03);
  --color-field: var(--field);
  --color-field-border: var(--field-border);

  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-chart-up: var(--chart-up);
  --color-chart-down: var(--chart-down);
  --color-error: var(--error);
  --color-info: var(--info);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-background-secondary: var(--background-secondary);
  --color-background-tertiary: var(--background-tertiary);
  --color-background-quaternary: var(--background-quaternary);
  --color-divider: var(--divider);
  --color-divider-secondary: var(--divider-secondary);
  --color-divider-tertiary: var(--divider-tertiary);
  --color-divider-quaternary: var(--divider-quaternary);
  --color-fg-primary: var(--fg-primary);
  --color-fg-secondary: var(--fg-secondary);
  --color-fg-tertiary: var(--fg-tertiary);
  --color-fg-quaternary: var(--fg-quaternary);
  --color-fg-placeholder: var(--fg-placeholder);
  --color-fg-disabled: var(--fg-disabled);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  color-scheme: light;

  --font-ibm-plex-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-ibm-plex-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-ibm-plex-sans-cn: "IBMPlexSansCN";
  --font-ibm-plex-mono-cn: "IBMPlexMonoCN";
  --font-family-sans: var(--font-ibm-plex-sans);
  --font-family-mono: var(--font-ibm-plex-mono);
  --font-family-serif: var(--font-ibm-plex-serif);

  --interactive: var(--color-brand-60);
  --interactive-hover: var(--color-brand-70);
  --interactive-active: var(--color-brand-80);
  --interactive-disabled: var(--color-gray-30);

  --text-primary: var(--color-gray-100);
  --text-secondary: var(--color-gray-70);
  --text-placeholder: var(--color-gray-50);
  --text-disabled: var(--color-gray-40);
  --text-on-color: var(--color-white);

  --layer-01: var(--color-gray-10);
  --layer-02: var(--color-white);
  --layer-03: var(--color-gray-20);
  --layer-hover: #e8e8e8;
  --field: var(--color-gray-10);
  --field-border: var(--color-gray-50);
  --border-subtle: var(--color-gray-20);
  --border-strong: var(--color-gray-50);

  --background: var(--color-white);
  --background-secondary: var(--layer-01);
  --background-tertiary: var(--layer-02);
  --background-quaternary: var(--layer-03);
  --foreground: var(--text-primary);
  --card: var(--layer-01);
  --card-foreground: var(--text-primary);
  --popover: var(--layer-01);
  --popover-foreground: var(--text-primary);
  --primary: var(--interactive);
  --primary-foreground: var(--text-on-color);
  --secondary: var(--color-gray-80);
  --secondary-foreground: var(--text-on-color);
  --muted: var(--layer-03);
  --muted-foreground: var(--text-secondary);
  --accent: var(--layer-hover);
  --accent-foreground: var(--text-primary);
  --destructive: var(--color-red-60);
  --destructive-foreground: var(--text-on-color);
  --border: var(--border-subtle);
  --input: var(--field-border);
  --ring: var(--interactive);

  --chart-1: var(--color-brand-60);
  --chart-2: var(--color-teal-50);
  --chart-3: var(--color-blue-60);
  --chart-4: var(--color-yellow-30);
  --chart-5: var(--color-purple-50);
  --chart-up: var(--color-brand-60);
  --chart-down: var(--color-green-50);

  --sidebar: var(--color-gray-100);
  --sidebar-foreground: var(--color-gray-10);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--text-on-color);
  --sidebar-accent: var(--color-gray-80);
  --sidebar-accent-foreground: var(--color-white);
  --sidebar-border: var(--color-gray-80);
  --sidebar-ring: var(--ring);

  --fg-primary: var(--text-primary);
  --fg-secondary: var(--text-secondary);
  --fg-tertiary: var(--color-gray-60);
  --fg-quaternary: var(--color-gray-50);
  --fg-placeholder: var(--text-placeholder);
  --fg-disabled: var(--text-disabled);

  --divider: var(--border-subtle);
  --divider-secondary: var(--border-strong);
  --divider-tertiary: var(--color-gray-30);
  --divider-quaternary: var(--interactive);

  --error: var(--color-red-60);
  --info: var(--color-blue-60);
  --success: var(--color-green-50);
  --warning: var(--color-yellow-30);

  --radius: 0;
}

:where(:lang(zh), [lang|="zh"]) {
  --font-family-sans: var(--font-ibm-plex-sans-cn), var(--font-ibm-plex-sans);
  --font-family-mono: var(--font-ibm-plex-mono-cn), var(--font-ibm-plex-mono);
}

[data-theme="dark"] {
  color-scheme: dark;

  --interactive: var(--color-brand-60);
  --interactive-hover: var(--color-brand-50);
  --interactive-active: var(--color-brand-40);
  --interactive-disabled: var(--color-gray-70);

  --text-primary: var(--color-gray-10);
  --text-secondary: var(--color-gray-30);
  --text-placeholder: var(--color-gray-60);
  --text-disabled: var(--color-gray-70);
  --text-on-color: var(--color-white);

  --layer-01: var(--color-gray-90);
  --layer-02: var(--color-gray-80);
  --layer-03: var(--color-gray-70);
  --layer-hover: var(--color-gray-80);
  --field: var(--color-gray-90);
  --field-border: var(--color-gray-50);
  --border-subtle: var(--color-gray-80);
  --border-strong: var(--color-gray-50);

  --background: var(--color-gray-100);
  --background-secondary: var(--layer-01);
  --background-tertiary: var(--layer-02);
  --background-quaternary: var(--layer-03);
  --foreground: var(--text-primary);
  --card: var(--layer-01);
  --card-foreground: var(--text-primary);
  --popover: var(--layer-01);
  --popover-foreground: var(--text-primary);
  --primary: var(--interactive);
  --primary-foreground: var(--text-on-color);
  --secondary: var(--color-gray-60);
  --secondary-foreground: var(--text-on-color);
  --muted: var(--layer-02);
  --muted-foreground: var(--text-secondary);
  --accent: var(--layer-hover);
  --accent-foreground: var(--text-primary);
  --destructive: var(--color-red-50);
  --destructive-foreground: var(--text-on-color);
  --border: var(--border-subtle);
  --input: var(--field-border);
  --ring: var(--interactive);

  --chart-1: var(--color-brand-50);
  --chart-2: var(--color-teal-40);
  --chart-3: var(--color-blue-40);
  --chart-4: var(--color-yellow-30);
  --chart-5: var(--color-purple-40);
  --chart-up: var(--color-brand-50);
  --chart-down: var(--color-green-40);

  --sidebar: var(--color-gray-100);
  --sidebar-foreground: var(--color-gray-10);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--text-on-color);
  --sidebar-accent: var(--color-gray-80);
  --sidebar-accent-foreground: var(--color-white);
  --sidebar-border: var(--color-gray-80);
  --sidebar-ring: var(--ring);

  --fg-primary: var(--text-primary);
  --fg-secondary: var(--text-secondary);
  --fg-tertiary: var(--color-gray-40);
  --fg-quaternary: var(--color-gray-50);
  --fg-placeholder: var(--text-placeholder);
  --fg-disabled: var(--text-disabled);

  --divider: var(--border-subtle);
  --divider-secondary: var(--border-strong);
  --divider-tertiary: var(--color-gray-70);
  --divider-quaternary: var(--interactive);

  --error: var(--color-red-50);
  --info: var(--color-blue-40);
  --success: var(--color-green-40);
  --warning: var(--color-yellow-30);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-family-sans);
    font-feature-settings:
      "liga" 1,
      "kern" 1;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-family-mono);
  }

  ::selection {
    background: var(--primary);
    color: var(--primary-foreground);
  }
}

@layer components {
  .bullx-json-editor {
    --jer-form-border: 1px solid var(--input);
    --jer-form-border-focus: 1px solid var(--ring);
    --jer-select-border: var(--input);
    --jer-select-focus: var(--ring);
    --jer-select-arrow: var(--muted-foreground);
  }

  .bullx-json-editor.jer-editor-container {
    border-radius: 0;
    overflow-x: auto;
  }

  .bullx-json-editor .jer-collection-header-row,
  .bullx-json-editor .jer-value-main-row {
    min-height: 1.75rem;
  }

  .bullx-json-editor .jer-edit-buttons,
  .bullx-json-editor .jer-confirm-buttons {
    align-items: center;
    gap: 0.125rem;
    height: 1.5rem;
    margin-left: 0.25rem;
  }

  .bullx-json-editor .jer-edit-buttons {
    opacity: 1;
  }

  .bullx-json-editor .jer-edit-buttons:hover {
    position: static;
  }

  .bullx-json-editor .jer-icon:hover {
    transform: none;
  }

  .bullx-json-editor .jer-collapse-icon {
    top: 0.375rem;
  }

  .bullx-json-editor .jer-input-text,
  .bullx-json-editor .jer-input-number,
  .bullx-json-editor .jer-key-edit,
  .bullx-json-editor .jer-collection-text-area {
    border-radius: 0;
    font-family: var(--font-family-mono);
    line-height: 1.25rem;
  }

  .bullx-json-editor .jer-select {
    border-radius: 0;
    background: var(--background);
    color: var(--foreground);
  }

  .bullx-json-editor .jer-select select {
    color: var(--foreground);
  }

  .bullx-json-editor .jer-collection-error-row,
  .bullx-json-editor .jer-collection-error-row-edit,
  .bullx-json-editor .jer-value-error-row {
    position: static;
  }
}
