@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap");

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@import "./openpress/page-contract.css";
@import "./openpress/slide-design-system.css";
@import "./openpress/print-route.css";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/nunito-sans";
@import "./openpress/workspace.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

@layer base {
  :root {
    --openpress-scrollbar-track: #141414;
    --openpress-scrollbar-track-sidebar: #171717;
    --openpress-scrollbar-thumb: rgb(255 255 255 / 18%);
    --openpress-scrollbar-thumb-hover: rgb(255 255 255 / 28%);

    color-scheme: dark;
    color: var(--openpress-text, #f2f2ee);
    background: #141414;
    font-family: var(--openpress-font-family, ui-sans-serif, system-ui, sans-serif);
    scrollbar-color: var(--openpress-scrollbar-thumb) var(--openpress-scrollbar-track);
    scrollbar-width: thin;
  }

  * {
    box-sizing: border-box;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: var(--openpress-scrollbar-thumb);
    background-clip: content-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--openpress-scrollbar-thumb-hover);
  }

  body {
    margin: 0;
    overflow-x: hidden;
    scrollbar-color: var(--openpress-scrollbar-thumb) var(--openpress-scrollbar-track);
    scrollbar-width: thin;
  }
}