:root {
            /* Primitive Color Tokens */
            --color-white: rgba(255, 255, 255, 1);
            --color-black: rgba(0, 0, 0, 1);
            --color-cream-50: rgba(252, 252, 249, 1);
            --color-cream-100: rgba(255, 255, 253, 1);
            --color-gray-200: rgba(245, 245, 245, 1);
            --color-gray-300: rgba(167, 169, 169, 1);
            --color-gray-400: rgba(119, 124, 124, 1);
            --color-slate-500: rgba(98, 108, 113, 1);
            --color-brown-600: rgba(94, 82, 64, 1);
            --color-charcoal-700: rgba(31, 33, 33, 1);
            --color-charcoal-800: rgba(38, 40, 40, 1);
            --color-slate-900: rgba(19, 52, 59, 1);
            --color-teal-300: rgba(50, 184, 198, 1);
            --color-teal-400: rgba(45, 166, 178, 1);
            --color-teal-500: rgba(33, 128, 141, 1);
            --color-teal-600: rgba(29, 116, 128, 1);
            --color-teal-700: rgba(26, 104, 115, 1);
            --color-teal-800: rgba(41, 150, 161, 1);
            --color-red-400: rgba(255, 84, 89, 1);
            --color-red-500: rgba(192, 21, 47, 1);
            --color-orange-400: rgba(230, 129, 97, 1);
            --color-orange-500: rgba(168, 75, 47, 1);

            /* RGB versions for opacity control */
            --color-brown-600-rgb: 94, 82, 64;
            --color-teal-500-rgb: 33, 128, 141;
            --color-slate-900-rgb: 19, 52, 59;
            --color-slate-500-rgb: 98, 108, 113;
            --color-red-500-rgb: 192, 21, 47;
            --color-red-400-rgb: 255, 84, 89;
            --color-orange-500-rgb: 168, 75, 47;
            --color-orange-400-rgb: 230, 129, 97;

            /* Background color tokens */
            --color-bg-1: rgba(59, 130, 246, 0.08);
            --color-bg-2: rgba(245, 158, 11, 0.08);
            --color-bg-3: rgba(34, 197, 94, 0.08);
            --color-bg-4: rgba(239, 68, 68, 0.08);
            --color-bg-5: rgba(147, 51, 234, 0.08);
            --color-bg-6: rgba(249, 115, 22, 0.08);
            --color-bg-7: rgba(236, 72, 153, 0.08);
            --color-bg-8: rgba(6, 182, 212, 0.08);

            /* Semantic Color Tokens */
            --color-background: var(--color-cream-50);
            --color-surface: var(--color-cream-100);
            --color-text: var(--color-slate-900);
            --color-text-secondary: var(--color-slate-500);
            --color-primary: var(--color-teal-500);
            --color-primary-hover: var(--color-teal-600);
            --color-primary-active: var(--color-teal-700);
            --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
            --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
            --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
            --color-border: rgba(var(--color-brown-600-rgb), 0.2);
            --color-btn-primary-text: var(--color-cream-50);
            --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
            --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
            --color-error: var(--color-red-500);
            --color-success: var(--color-teal-500);
            --color-warning: var(--color-orange-500);
            --color-info: var(--color-slate-500);
            --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
            --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

            /* Common style patterns */
            --focus-ring: 0 0 0 3px var(--color-focus-ring);
            --focus-outline: 2px solid var(--color-primary);
            --status-bg-opacity: 0.15;
            --status-border-opacity: 0.25;

            /* RGB versions for opacity control */
            --color-success-rgb: 33, 128, 141;
            --color-error-rgb: 192, 21, 47;
            --color-warning-rgb: 168, 75, 47;
            --color-info-rgb: 98, 108, 113;

            /* Typography */
            --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-base: 14px;
            --font-size-md: 14px;
            --font-size-lg: 16px;
            --font-size-xl: 18px;
            --font-size-2xl: 20px;
            --font-size-3xl: 24px;
            --font-size-4xl: 30px;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 550;
            --font-weight-bold: 600;
            --line-height-tight: 1.2;
            --line-height-normal: 1.5;
            --letter-spacing-tight: -0.01em;

            /* Spacing */
            --space-0: 0;
            --space-1: 1px;
            --space-2: 2px;
            --space-4: 4px;
            --space-6: 6px;
            --space-8: 8px;
            --space-10: 10px;
            --space-12: 12px;
            --space-16: 16px;
            --space-20: 20px;
            --space-24: 24px;
            --space-32: 32px;

            /* Border Radius */
            --radius-sm: 6px;
            --radius-base: 8px;
            --radius-md: 10px;
            --radius-lg: 12px;
            --radius-full: 9999px;

            /* Shadows */
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

            /* Animation */
            --duration-fast: 150ms;
            --duration-normal: 250ms;
            --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

            /* Custom colors for capacity indicators */
            --capacity-green: #10b981;
            --capacity-yellow: #f59e0b;
            --capacity-red: #ef4444;
        }

        /* Base styles */
        html {
            font-size: var(--font-size-base);
            font-family: var(--font-family-base);
            line-height: var(--line-height-normal);
            color: var(--color-text);
            background-color: var(--color-background);
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--color-background);
        }

        *, *::before, *::after {
            box-sizing: inherit;
        }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            margin: 0;
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-tight);
            color: var(--color-text);
            letter-spacing: var(--letter-spacing-tight);
        }

        h1 { font-size: var(--font-size-4xl); }
        h2 { font-size: var(--font-size-3xl); }
        h3 { font-size: var(--font-size-2xl); }
        h4 { font-size: var(--font-size-xl); }
        h5 { font-size: var(--font-size-lg); }
        h6 { font-size: var(--font-size-md); }

        p {
            margin: 0 0 var(--space-16) 0;
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-8) var(--space-16);
            border-radius: var(--radius-base);
            font-size: var(--font-size-base);
            font-weight: 500;
            line-height: 1.5;
            cursor: pointer;
            transition: all var(--duration-normal) var(--ease-standard);
            border: none;
            text-decoration: none;
        }


        .btn:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .btn--primary {
            background: var(--color-primary);
            color: var(--color-btn-primary-text);
        }

        .btn--primary:hover {
            background: var(--color-primary-hover);
        }

        .btn--secondary {
            background: var(--color-secondary);
            color: var(--color-text);
        }

        .btn--secondary:hover {
            background: var(--color-secondary-hover);
        }

        .btn--outline {
            background: transparent;
            border: 1px solid var(--color-border);
            color: var(--color-text);
        }

        .btn--outline:hover {
            background: var(--color-secondary);
        }

        .btn--full-width {
            width: 100%;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Form elements */
        .form-control {
            display: block;
            width: 100%;
            padding: var(--space-8) var(--space-12);
            font-size: var(--font-size-md);
            line-height: 1.5;
            color: var(--color-text);
            background-color: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-base);
            transition: border-color var(--duration-fast) var(--ease-standard);
        }

        .form-control:focus {
            border-color: var(--color-primary);
            outline: var(--focus-outline);
        }

        .form-label {
            display: block;
            margin-bottom: var(--space-8);
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-sm);
        }

        .form-group {
            margin-bottom: var(--space-16);
        }

        /* Card component */
        .card {
            background-color: var(--color-surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-card-border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            transition: box-shadow var(--duration-normal) var(--ease-standard);
        }

        .card:hover {
            box-shadow: var(--shadow-md);
        }

        .card__body {
            padding: var(--space-16);
        }

        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-16);
        }

        /* Header */
        .header {
            background-color: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            padding: var(--space-16) 0;
            box-shadow: var(--shadow-sm);
        }

        .header h1 {
            color: var(--color-primary);
        }

        /* Navigation */
        .nav {
            display: flex;
            gap: var(--space-16);
            margin-top: var(--space-8);
        }

        .nav-link {
            color: var(--color-text-secondary);
            text-decoration: none;
            padding: var(--space-8);
            border-radius: var(--radius-sm);
            transition: all var(--duration-fast);
        }

        .nav-link:hover, .nav-link.active {
            color: var(--color-primary);
            background-color: var(--color-bg-1);
        }

        /* Views */
        .view {
            display: none;
            padding: var(--space-32) 0;
        }

        .view.active {
            display: block;
        }

        /* Dashboard */
        .blocks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-24);
            margin-bottom: var(--space-32);
        }

        .block-card {
            padding: var(--space-20);
        }

        .block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-16);
        }

        .block-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
        }

        .capacity-indicator {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-full);
        }

        .capacity-indicator.green { background-color: var(--capacity-green); }
        .capacity-indicator.yellow { background-color: var(--capacity-yellow); }
        .capacity-indicator.red { background-color: var(--capacity-red); }

        .capacity-bar {
            width: 100%;
            height: 8px;
            background-color: var(--color-secondary);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin: var(--space-8) 0;
        }

        .capacity-fill {
            height: 100%;
            border-radius: var(--radius-full);
            transition: width var(--duration-normal);
        }

        .capacity-fill.green { background-color: var(--capacity-green); }
        .capacity-fill.yellow { background-color: var(--capacity-yellow); }
        .capacity-fill.red { background-color: var(--capacity-red); }

        .capacity-stats {
            display: flex;
            justify-content: space-between;
            font-size: var(--font-size-sm);
            color: var(--color-text-secondary);
            margin-bottom: var(--space-16);
        }

        /* Forms */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-16);
        }

        .error-message {
            color: var(--color-error);
            font-size: var(--font-size-sm);
            margin-top: var(--space-4);
        }

        /* QR Pass */
        .qr-pass {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-24);
            box-shadow: var(--shadow-lg);
        }

        .qr-code-container {
            margin: var(--space-20) 0;
        }

        .pass-details {
            margin: var(--space-16) 0;
            text-align: left;
        }

        .pass-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--space-8);
            padding-bottom: var(--space-4);
            border-bottom: 1px solid var(--color-border);
        }

        .pass-row:last-child {
            border-bottom: none;
        }

        /* Bookings table */
        .table-container {
            overflow-x: auto;
        }

        .bookings-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .bookings-table th,
        .bookings-table td {
            padding: var(--space-12);
            text-align: left;
            border-bottom: 1px solid var(--color-border);
        }

        .bookings-table th {
            background-color: var(--color-bg-1);
            font-weight: var(--font-weight-semibold);
        }

        .bookings-table tr:hover {
            background-color: var(--color-bg-1);
        }

        /* Summary stats */
        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-16);
            margin-bottom: var(--space-32);
        }

        .stat-card {
            text-align: center;
            padding: var(--space-16);
        }

        .stat-number {
            font-size: var(--font-size-3xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-primary);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .blocks-grid {
                grid-template-columns: 1fr;
            }

            .nav {
                flex-wrap: wrap;
            }

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

        /* Utility classes */
        .text-center { text-align: center; }
        .text-success { color: var(--color-success); }
        .text-error { color: var(--color-error); }
        .text-warning { color: var(--color-warning); }
        .mt-16 { margin-top: var(--space-16); }
        .mb-16 { margin-bottom: var(--space-16); }
        .hidden { display: none; }