/**
 * Shared Theme Styles for Xcalidraw MFEs
 * 
 * This theme is SCOPED to the .xcalidraw-theme class.
 * Only elements inside <ThemeProvider> will receive these styles.
 * 
 * Usage:
 *   import { ThemeProvider } from "@xcalidraw/shared-ui";
 *   
 *   function App() {
 *     return (
 *       <ThemeProvider>
 *         <YourApp />  // Only this receives the theme styles
 *       </ThemeProvider>
 *     );
 *   }
 * 
 * This approach ensures:
 * - Board app is never affected (no global selectors)
 * - Styles are isolated to your MFE only
 * - No CSS conflicts between MFEs
 */


/* Font Faces - Available globally but only applied within .xcalidraw-theme */
@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-Light-DlXMI-yU.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-LightItalic-CEKA6hqe.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-Regular-bmdV8fUx.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-Italic-7i5B2jgp.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-Medium-C-1-7KOl.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-MediumItalic-Cp5nc9PY.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-Bold-BGoo8i9Y.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/Ubuntu-BoldItalic-BPbFFILc.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Theme Variables - Tailwind v4 CSS-first configuration */
@theme {
  /* Fonts */
  --font-sans: "Ubuntu";
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Primary (Teal) */
  --color-primary: #087f5b;
  --color-primary-hover: #099268;
  --color-primary-active: #066045;
  --color-primary-light: #e6fcf5;
  --color-primary-foreground: #ffffff;

  /* Custom Neutral Grays (higher number = darker) */
  --color-neutral-10: #f5f5f5;
  --color-neutral-20: #ebebeb;
  --color-neutral-30: #d6d6d6;
  --color-neutral-40: #b8b8b8;
  --color-neutral-50: #999999;
  --color-neutral-60: #7a7a7a;
  --color-neutral-70: #5c5c5c;
  --color-neutral-80: #3d3d3d;
  --color-neutral-85: #242424;
  --color-neutral-90: #1e1e1e;
  --color-neutral-100: #121212;

  /* Semantic Colors */
  --color-background: #f8f9fa;
  --color-foreground: #1b1b1f;
  --color-card: #ffffff;
  --color-card-foreground: #1b1b1f;
  --color-popover: #ffffff;
  --color-popover-foreground: #1b1b1f;
  --color-muted: #f1f3f5;
  --color-muted-foreground: #7a7a7a;
  --color-accent: #f1f3f5;
  --color-accent-foreground: #1b1b1f;
  --color-border: #ebebeb;
  --color-input: #ebebeb;
  --color-ring: #087f5b;

  /* Secondary */
  --color-secondary: #f1f3f5;
  --color-secondary-foreground: #1b1b1f;

  /* Destructive */
  --color-destructive: #dc2626;
  --color-destructive-foreground: #ffffff;

  /* Success */
  --color-success: #268029;
  --color-success-background: #cafccc;

  /* Warning */
  --color-warning: #f5c354;
  --color-warning-background: #fceeca;

  /* Surfaces */
  --color-surface-high: #f1f3f5;
  --color-surface-mid: #f8f9fa;
  --color-surface-low: #ececf4;
  --color-surface-lowest: #ffffff;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* 
 * SCOPED STYLES - Only applied within .xcalidraw-theme wrapper
 * 
 * This ensures complete isolation from other MFEs like board app.
 */
.xcalidraw-theme {
  font-family: var(--font-sans);
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply font to all descendants within the theme */
.xcalidraw-theme * {
  font-family: inherit;
}

/* Scrollbar with invisible thumb by default, visible on hover */
.xcalidraw-theme .scrollbar-hover {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.xcalidraw-theme .scrollbar-hover::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.xcalidraw-theme .scrollbar-hover::-webkit-scrollbar-track {
  background: transparent;
}

.xcalidraw-theme .scrollbar-hover::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.xcalidraw-theme .scrollbar-hover:hover {
  scrollbar-color: var(--color-border) transparent;
}

.xcalidraw-theme .scrollbar-hover:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
}