/**
 * BLACK & WHITE DESIGN SYSTEM - EXPORTED CSS
 * Generated: 2026-03-16T15:46:27.876Z
 *
 * USAGE INSTRUCTIONS FOR CLAUDE:
 * This is a complete black & white design system inspired by classic Macintosh/Xerox interfaces.
 *
 * COLORS:
 * - Dark color: #2c203d
 * - Light color: #ffffff
 * - Gray tones are dynamically calculated as blends
 *
 * HOW TO USE:
 * 1. Include this CSS file in your HTML: <link rel="stylesheet" href="bw-design-system.css">
 * 2. Use BEM naming: .bw-[component] for blocks, .bw-[component]__[element] for elements
 * 3. Use modifiers: .bw-[component]--[modifier]
 * 4. State classes: .is-active, .is-disabled, .is-selected, etc.
 *
 * COMPONENTS AVAILABLE:
 * - Buttons: .bw-button, .bw-button--primary, .bw-button--small, .bw-button--large
 * - Forms: .bw-input, .bw-textarea, .bw-select, .bw-checkbox, .bw-radio
 * - Cards: .bw-card, .bw-card--elevated
 * - Navigation: .bw-nav, .bw-tabs, .bw-breadcrumbs, .bw-pagination
 * - Alerts: .bw-alert, .bw-alert--info, .bw-alert--success, .bw-alert--warning, .bw-alert--error
 * - Tables: .bw-table
 * - Links: .bw-link
 * - Tags: .bw-tag
 * - Badges: .bw-badge
 * - Tooltips: .bw-tooltip
 * - Modals: .bw-modal, .bw-modal-backdrop
 * - Dividers: .bw-divider
 * - Progress: .bw-progress
 *
 * BORDER HIERARCHY (Information Architecture):
 * - 1px (--border-thin): Subtle elements (table cells, tags, pagination)
 * - 2px (--border-standard): Standard containers (forms, nav, tabs)
 * - 3px (--border-thick): Important elements (buttons, cards, alerts)
 * - 4px (--border-heavy): Critical elements (modals, h1, major sections)
 *
 * ACCESSIBILITY:
 * - All interactive elements support keyboard navigation
 * - Focus states use 2px outline with 2px offset
 * - ARIA attributes should be added to interactive components
 * - Text on patterned backgrounds uses text-shadow for readability
 * - High contrast by default (15.21:1)
 *
 * RESPONSIVE:
 * - Mobile-first approach
 * - Breakpoint: 768px for tablet/desktop adjustments
 * - Touch targets: 44px minimum on mobile
 */

/* ========================================
   RESET & BASE
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   DESIGN TOKENS
======================================== */

:root {
    /* Colors */
    --color-black: #2c203d;
    --color-white: #ffffff;

    /* Derived Gray Tones */
    --color-gray-dark: #80798b;
    --color-gray-medium: #aba6b1;
    --color-gray-light: #cac7cf;

    /* Text Shadow Colors */
    --text-shadow-light: #ffffff;
    --text-shadow-dark: #2c203d;

    /* Shadow Positioning */
    --shadow-x: 6px;
    --shadow-y: 6px;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border Widths (Hierarchical) */
    --border-thin: 1px;
    --border-standard: 2px;
    --border-thick: 3px;
    --border-heavy: 4px;

    /* Typography Scale */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-loose: 1.8;

    /* Font Families */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 1100;

    /* Dithered Patterns */
    --pattern-dither-25: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23ffffff"/><rect width="1" height="1" fill="%232c203d" x="0" y="0"/><rect width="1" height="1" fill="%232c203d" x="2" y="2"/></svg>');
    --pattern-dither-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect width="2" height="2" fill="%23ffffff"/><rect width="1" height="1" fill="%232c203d" x="0" y="0"/><rect width="1" height="1" fill="%232c203d" x="1" y="1"/></svg>');
    --pattern-dither-75: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%232c203d"/><rect width="1" height="1" fill="%23ffffff" x="0" y="0"/><rect width="1" height="1" fill="%23ffffff" x="2" y="2"/></svg>');
    --pattern-diagonal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="%23ffffff"/><path d="M0,8 L8,0 M-2,2 L2,-2 M6,10 L10,6" stroke="%232c203d" stroke-width="1"/></svg>');
    --pattern-crosshatch: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="%23ffffff"/><path d="M0,0 L8,8 M8,0 L0,8" stroke="%232c203d" stroke-width="1"/></svg>');
    --pattern-dots: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="%23ffffff"/><circle cx="2" cy="2" r="1" fill="%232c203d"/><circle cx="6" cy="6" r="1" fill="%232c203d"/></svg>');
    --pattern-vertical: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23ffffff"/><rect width="1" height="4" fill="%232c203d" x="0" y="0"/><rect width="1" height="4" fill="%232c203d" x="2" y="0"/></svg>');
    --pattern-horizontal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23ffffff"/><rect width="4" height="1" fill="%232c203d" x="0" y="0"/><rect width="4" height="1" fill="%232c203d" x="0" y="2"/></svg>');
}

/* Continue with all component styles... (truncated for brevity - full CSS would be here) */