/* SAGE v0.5 - Design System */
/* Generated from design-system.json on 2025-09-04T14:35:11.758Z */
:root {
    /* MONO COLORS */
/* MONO - Base: #000000 */
    --mono-50: #fafafa;
    --mono-100: #f6f6f6;
    --mono-200: #ededee;
    --mono-300: #dddee0;
    --mono-400: #c8c8cc;
    --mono-500: #b2b3b8;
    --mono-600: #929397;
    --mono-700: #6a6a6d;
    --mono-800: #414243;
    --mono-900: #111111;


    /* CUSTOM COLORS */
/* COLOR-P12U - Base: #6877a6 */
    --color-slate-50: #f5f8ff;
    --color-slate-100: #eaefff;
    --color-slate-200: #d4dfff;
    --color-slate-300: #b2c1f1;
    --color-slate-400: #8291bf;
    --color-slate-500: #6877a6;
    --color-slate-600: #4e5a7d;
    --color-slate-700: #404861;
    --color-slate-800: #2e323f;
    --color-slate-900: #1d1f25;

/* COLOR-QW51 - Base: #7652ED */
    --color-violet-50: #f2eeff;
    --color-violet-100: #e3daff;
    --color-violet-200: #c5b4ff;
    --color-violet-300: #a58aff;
    --color-violet-400: #9271ff;
    --color-violet-500: #7652ed;
    --color-violet-600: #593eb2;
    --color-violet-700: #4b3989;
    --color-violet-800: #382e5a;
    --color-violet-900: #242034;

    /* COLOR PALETTES */
/* COLOR-GREEN - Base: #28A745 */
    --color-green-50: #95ff9f;
    --color-green-100: #86fb92;
    --color-green-200: #69de77;
    --color-green-300: #39b451;
    --color-green-400: #0a9838;
    --color-green-500: #007e1e;
    --color-green-600: #006400;
    --color-green-700: #004a00;
    --color-green-800: #003300;
    --color-green-900: #002700;

/* COLOR-RED - Base: #DC3545 */
    --color-red-50: #ffbab8;
    --color-red-100: #ffabaa;
    --color-red-200: #ff8f90;
    --color-red-300: #ff6469;
    --color-red-400: #ed4651;
    --color-red-500: #cd243a;
    --color-red-600: #ae0025;
    --color-red-700: #8e0011;
    --color-red-800: #700000;
    --color-red-900: #5d0000;

/* COLOR-AMBER - Base: #FFC107 */
    --color-amber-50: #ffe742;
    --color-amber-100: #ffd832;
    --color-amber-200: #fabd00;
    --color-amber-300: #cb9500;
    --color-amber-400: #ad7b00;
    --color-amber-500: #8f6300;
    --color-amber-600: #744b00;
    --color-amber-700: #5b3400;
    --color-amber-800: #471d00;
    --color-amber-900: #3c0d00;

/* COLOR-TEAL - Base: #17A2B8 */
    --color-teal-50: #91ffff;
    --color-teal-100: #82f2ff;
    --color-teal-200: #62d6ed;
    --color-teal-300: #2cacc2;
    --color-teal-400: #0091a7;
    --color-teal-500: #00788d;
    --color-teal-600: #005f73;
    --color-teal-700: #00465b;
    --color-teal-800: #003043;
    --color-teal-900: #002233;

/* COLOR-BLUE - Base: #2196F3 */
    --color-blue-50: #a4f5ff;
    --color-blue-100: #94e6ff;
    --color-blue-200: #73cbff;
    --color-blue-300: #3aa2ff;
    --color-blue-400: #0088e3;
    --color-blue-500: #006fc7;
    --color-blue-600: #0057ab;
    --color-blue-700: #004090;
    --color-blue-800: #002b76;
    --color-blue-900: #001e64;

    /* TYPOGRAPHY */
    --font-family-base: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas, 'Courier New', monospace;

    --font-weight-thin: 300;
    --font-weight-medium: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 600;

    --font-size-xs: 0.625rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 6vw;
    --font-size-5xl: 8vw;
    --font-size-6xl: 10vw;

    /* BORDER SYSTEM */
    --border-width-thin: 1px;
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 18px;
    --border-radius-pill: 9999px;
    
    --border-color-light: var(--grey-lightest);
    --border-color-medium: var(--grey-lighter);
    --border-color-dark: var(--grey-light);
    --border-color-focus: var(--color-blue-400);

    /* SEMANTIC COLOR SYSTEM */
    /* Interactive States */
    --color-hover: var(--grey-white);
    --color-hover-dark: var(--grey-lightest);
    --color-active: var(--grey-lightest);
    --color-focus: var(--color-blue-400);
    --color-focus-alpha: rgba(33, 150, 243, 0.25);
    
    /* Text Colors */
    --text-primary: var(--grey-darker);
    --text-secondary: var(--grey-dim);
    --text-muted: var(--grey-steel);
    
    /* Background Colors */
    --bg-primary: white;
    --bg-secondary: var(--grey-near-white);
    --bg-muted: var(--grey-lightest);
    
    /* Button Semantic Colors */
    --btn-primary-bg: var(--grey-dark);
    --btn-primary-text: white;
    --btn-primary-hover: var(--grey-darker);
    --btn-primary-active: var(--grey-deep);

    --btn-inverse-bg: var(--grey-darker);
    --btn-inverse-text: white;
    --btn-inverse-hover: var(--grey-dim);
    --btn-inverse-active: var(--grey-deep);
    
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--text-secondary);
    --btn-secondary-border: var(--grey-soft);
    --btn-secondary-hover-bg: var(--color-hover);
    --btn-secondary-hover-text: var(--text-primary);
    --btn-secondary-hover-border: var(--border-color-dark);
    
    /* Status Colors (semantic aliases into palettes) */
    --color-success: var(--color-green-300);
    --color-success-bg: var(--color-green-50);
    --color-error: var(--color-red-400);
    --color-error-bg: var(--color-red-50);
    --color-warning: var(--color-amber-50);
    --color-warning-bg: var(--color-amber-50);
    --color-info: var(--color-teal-300);
    --color-info-bg: var(--color-teal-50);

    /* TEXT UTILITY CLASSES */
    /* Note: Text utility classes will be preserved from original CSS */
}

/* Text Classes (Generated from JSON) */
body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: 1.25;
    color: var(--grey-darker);
    font-synthesis: none;
}

h1, h2, h3 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.125em;
}

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

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}


.text-xs {
    font-size: var(--font-size-sm);
    line-height: 1.25em;
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
    line-height: 1.125em;
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
    line-height: 1.125;
}

.text-2xl {
    font-size: var(--font-size-2xl);
    line-height: 1.25;
}

.text-3xl {
    font-size: var(--font-size-3xl);
    line-height: 1.125;
}

.text-4xl {
    font-size: var(--font-size-4xl);
    line-height: 1.125;
}

.text-5xl {
    font-size: var(--font-size-5xl);
    line-height: 1;
}

.text-6xl {
    font-size: var(--font-size-6xl);
    line-height: 1;
}

.text-mono-xs {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

.text-color-primary {
    color: var(--grey-darker);
}

.text-color-secondary {
    color: var(--grey-dim);
}

/* Document Typography — semantic classes for document-like content views */

.doc-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0;
}

.doc-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
}

.doc-body {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.5;
}

.doc-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.doc-placeholder {
    font-style: italic;
    color: var(--text-muted);
}

/* Additional utility classes and component styles would go here */