@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap');

/* Lab Mono Font */
@font-face {
    font-family: 'Lab Mono';
    src: url('./lib/fonts/custom-fonts/LabMono-Regular.woff2') format('woff2'),
         url('./lib/fonts/custom-fonts/LabMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Typography Theme - SUPRB Sans Typography System */

/* ========== CRISP FONT RENDERING ========== */
/* Apply font smoothing only to text elements to avoid canvas interference */
body, 
.text-item, 
.document-editor-content, 
.toolbar, 
.help-modal-content,
.selection-toolbar,
h1, h2, h3, h4, h5, h6,
button, 
input, 
select, 
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
}

/* Optimize text rendering for different zoom levels */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

/* Force subpixel positioning for maximum sharpness - only for text elements */
.text-item .rich-text-editor,
.document-editor-content {
    transform: translateZ(0);
    will-change: transform;
}

/* ========== TYPOGRAPHY OVERRIDES ========== */
:root {
    /* Override main font */
    --font-main: 'InterVariable', 'Inter', sans-serif;
 

    
    /* Fine-tune font weights to match SUPRB Sans */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
    
    /* Keep book weight for backwards compatibility */
    --font-book: 400;
    --font-light: 400; /* Use regular as lightest */
    
    /* Font sizes - multiplier-based system using existing variable names */
    --font-size-base: 16px; /* Base font size */
    --font-size-scale: 1.125; /* Perfect fourth scale (1.125) */
    /*
      - 1.125 = Perfect fourth (current)
      - 1.2 = Minor third
      - 1.333 = Perfect fourth
      - 1.414 = Augmented fourth
      - 1.5 = Perfect fifth
      - 1.618 = Golden ratio
    */
    
    /* Override existing styles.css variables with calculated values */
    --text-xs: calc(var(--font-size-base) * 0.714); /* ~10px */
    --text-sm: calc(var(--font-size-base) * 0.857); /* ~12px */
    --text-base: var(--font-size-base); /* 14px */
    --text-md: calc(var(--font-size-base) * 1.143); /* ~16px */
    --text-lg: calc(var(--font-size-base) * 1.429); /* ~20px */
    --text-xl: calc(var(--font-size-base) * var(--font-size-scale) * 3); /* ~48px */
    
    /* Extended sizes for better hierarchy */
    --text-2xl: calc(var(--font-size-base) * var(--font-size-scale) * 2); /* ~32px */
    --text-3xl: calc(var(--font-size-base) * var(--font-size-scale) * 1.75); /* ~28px */
    --text-4xl: calc(var(--font-size-base) * var(--font-size-scale) * 1.5); /* ~24px */
    
    /* Enable ss03 stylistic set */
     /*--font-features: "ss03" 1, "cv11" 1, "dlig" 1, "tnum" 1, "zero" 1;*/

}

/** {
    font-family: var(--font-main) !important;
    font-weight: var(--font-normal);
    font-size: var(--text-base) !important;
    font-feature-settings: var(--font-features) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-kerning: auto;
    font-optical-sizing: auto;
}*/

/* ========== GLOBAL FONT APPLICATION ========== */
body {
    font-family: var(--font-main);
    font-weight: var(--font-normal);
    font-size: var(--text-base);
    font-feature-settings: var(--font-features);

    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-kerning: normal;
    
    /* Enhanced font rendering for crisp text */
   /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-kerning: auto;
    font-optical-sizing: auto;*/
    /*letter-spacing: -0.01em;*/
}

/* Text items */
.text-item .rich-text-editor,
.text-item .rich-text-editor * {
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-feature-settings: var(--font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Document modal */
.document-editor-content,
.document-editor-content * {
    font-family: var(--font-main);
    /*font-size: var(--text-base);*/
    font-feature-settings: var(--font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-feature-settings: var(--font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
}

h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
}

h4 {
    font-size: var(--text-4xl);
    font-weight: var(--font-medium);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

h6 {
    font-size: var(--text-md);
    font-weight: var(--font-medium);
}

/* Toolbar and UI elements */
.toolbar,
.tool-btn,
.tool-select,
button,
input,
select,
textarea {
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-feature-settings: var(--font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Text size controls */
.text-size-s { 
    font-weight: var(--font-light);
    font-size: var(--text-sm);
}
.text-size-m { 
    font-weight: var(--font-normal);
    font-size: var(--text-base);
}
.text-size-l { 
    font-weight: var(--font-medium);
    font-size: var(--text-md);
}

/* Logic nodes */
.logic-node,
.logic-node * {
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-feature-settings: var(--font-features);
}

/* Help modal */
.help-modal-content,
.help-modal-content * {
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-feature-settings: var(--font-features);
}

/* Selection toolbar */
.selection-toolbar,
.selection-toolbar * {
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-feature-settings: var(--font-features);
}

/* Make light text more readable */
.text-item .rich-text-editor p {
    font-weight: var(--font-book);
}

/* Stronger emphasis for important UI elements */
.toolbar .tool-btn {
    font-weight: var(--font-medium);
}

.help-modal-content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

.help-modal-content h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
}

/* Fine-tune document editor typography */
.document-editor-content p {
    font-weight: var(--font-book);
}

.document-editor-content h1 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.document-editor-content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
}

.document-editor-content h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
}

.document-editor-content strong {
    font-weight: var(--font-bold);
}

.document-editor-content em {
    font-style: italic;
}

/* Improve readability for smaller text */
.storage-indicator,
.zoom-indicator,
.position-indicators {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}




.notion-editor-container h1, 
h1.editor-block, 
.notion-editor-container h1.editor-block,
.notion-editor-container h2, 
h2.editor-block, 
.notion-editor-container h2.editor-block,
.notion-editor-container h3, 
h3.editor-block, 
.notion-editor-container h3.editor-block {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== CUSTOM FONT CLASSES ========== */
/* Font family classes for text items */
.text-item.font-inter .rich-text-editor,
.text-item.font-inter .rich-text-editor *,
.text-item.font-inter .notion-editor-container,
.text-item.font-inter .notion-editor-container *,
.text-item.font-inter .editor-block {
    font-family: 'InterVariable', 'Inter', sans-serif !important;
}

.text-item.font-source-serif .rich-text-editor,
.text-item.font-source-serif .rich-text-editor *,
.text-item.font-source-serif .notion-editor-container,
.text-item.font-source-serif .notion-editor-container *,
.text-item.font-source-serif .editor-block {
    font-family: 'Source Serif 4', serif !important;
}

.text-item.font-fuzzy-bubbles .rich-text-editor,
.text-item.font-fuzzy-bubbles .rich-text-editor *,
.text-item.font-fuzzy-bubbles .notion-editor-container,
.text-item.font-fuzzy-bubbles .notion-editor-container *,
.text-item.font-fuzzy-bubbles .editor-block {
    font-family: 'Fuzzy Bubbles', cursive !important;
}

.text-item.font-lab-mono .rich-text-editor,
.text-item.font-lab-mono .rich-text-editor *,
.text-item.font-lab-mono .notion-editor-container,
.text-item.font-lab-mono .notion-editor-container *,
.text-item.font-lab-mono .editor-block {
    font-family: 'Lab Mono', monospace !important;
}