{{--
    ATOMIC TICKET STYLES
    ====================
    Following atomic design principles:
    - Atoms: Basic building blocks (colors, typography, spacing)
    - Molecules: Simple combinations (badges, boxes, labels)
    - Organisms: Complex components (headers, sections, layouts)
--}}

<style>
    /* ============================================================================
       ATOMS: Basic Building Blocks
       ============================================================================ */

    /* Reset & Base */
    @page {
        size: 297mm 210mm; /* A4 Landscape */
        margin: 0;
    }

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

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 10pt;
        color: #1E293B;
        background: white;
        margin: 0;
        padding: 0;
        width: 297mm;
        height: 210mm;
    }

    /* Color Tokens (Atoms) */
    :root {
        /* Brand gradient */
        --brand-blue: #1e3a8a;
        --brand-purple: #7c3aed;
        --brand-pink: #db2777;

        /* Text colors */
        --text-primary: #1E293B;
        --text-secondary: #64748B;
        --text-muted: #94A3B8;
        --text-white: #FFFFFF;

        /* Background colors */
        --bg-light: #F8FAFC;
        --bg-white: #FFFFFF;
        --bg-section: #F8F9FA;

        /* Border colors */
        --border-light: #E2E8F0;
        --border-gray: #CBD5E0;

        /* Tier colors (dynamic) */
        --tier-pink: #EC4899;
        --tier-blue: #3B82F6;
        --tier-green: #10B981;
        --tier-gold: #F59E0B;
        --tier-purple: #8B5CF6;
    }

    /* Typography Scale (Atoms) */
    .text-xs {
        font-size: 7pt;
    }

    .text-sm {
        font-size: 8pt;
    }

    .text-base {
        font-size: 10pt;
    }

    .text-lg {
        font-size: 12pt;
    }

    .text-xl {
        font-size: 14pt;
    }

    .text-2xl {
        font-size: 16pt;
    }

    .text-3xl {
        font-size: 20pt;
    }

    .text-4xl {
        font-size: 24pt;
    }

    .text-5xl {
        font-size: 32pt;
    }

    .text-6xl {
        font-size: 48pt;
    }

    .text-7xl {
        font-size: 72pt;
    }

    .text-8xl {
        font-size: 96pt;
    }

    /* Font Weights (Atoms) */
    .font-normal {
        font-weight: 400;
    }

    .font-medium {
        font-weight: 500;
    }

    .font-semibold {
        font-weight: 600;
    }

    .font-bold {
        font-weight: 700;
    }

    /* Text Transforms (Atoms) */
    .uppercase {
        text-transform: uppercase;
    }

    .monospace {
        font-family: 'Courier New', Consolas, monospace;
    }

    /* Letter Spacing (Atoms) */
    .tracking-tight {
        letter-spacing: -0.3px;
    }

    .tracking-normal {
        letter-spacing: 0;
    }

    .tracking-wide {
        letter-spacing: 0.5px;
    }

    .tracking-wider {
        letter-spacing: 1px;
    }

    .tracking-widest {
        letter-spacing: 1.5px;
    }

    /* ============================================================================
       MOLECULES: Simple Combinations
       ============================================================================ */

    /* Badge Molecule */
    .badge {
        display: inline-block;
        padding: 3mm 6mm;
        border-radius: 5mm;
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .badge-tier {
        background: var(--tier-pink);
        color: var(--text-white);
    }

    .badge-type {
        background: rgba(255, 255, 255, 0.25);
        color: var(--text-white);
        padding: 2mm 4mm;
        border-radius: 3mm;
        font-size: 8pt;
        letter-spacing: 0.8px;
    }

    /* Info Box Molecule */
    .info-box {
        background: var(--bg-light);
        border-left: 3px solid var(--brand-blue);
        padding: 3mm;
        border-radius: 2mm;
        margin: 3mm 0;
    }

    .info-box-header {
        font-size: 8pt;
        color: var(--text-secondary);
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 2mm;
        letter-spacing: 0.3px;
    }

    /* QR Code Container Molecule */
    .qr-container {
        display: block;
        margin: 5mm auto;
        padding: 5mm;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: 3mm;
        width: 60mm;
        text-align: center;
    }

    .qr-image {
        width: 50mm;
        height: 50mm;
        display: block;
        margin: 0 auto;
    }

    .qr-label {
        font-size: 10pt;
        color: var(--text-secondary);
        margin-top: 3mm;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Label-Value Pair Molecule */
    .label-value {
        display: block;
        margin-bottom: 2mm;
    }

    .label {
        font-size: 8pt;
        color: var(--text-secondary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: block;
        margin-bottom: 1mm;
    }

    .value {
        font-size: 10pt;
        color: var(--text-primary);
        font-weight: 500;
        display: block;
    }

    .value-large {
        font-size: 20pt;
        font-weight: bold;
    }

    .value-huge {
        font-size: 72pt;
        font-weight: bold;
        line-height: 1;
    }

    .value-massive {
        font-size: 96pt;
        font-weight: bold;
        line-height: 1;
        color: var(--brand-blue);
    }

    /* ============================================================================
       ORGANISMS: Complex Components
       ============================================================================ */

    /* Main Ticket Wrapper Organism */
    .ticket-wrapper {
        width: 297mm;
        height: 210mm;
        position: relative;
        background: var(--bg-white);
    }

    /* Hero Header Organism */
    .hero-header {
        width: 100%;
        height: 80mm;
        background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-purple) 50%, var(--brand-pink) 100%);
        position: relative;
        display: table;
    }

    .hero-overlay {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: var(--text-white);
        padding: 10mm;
    }

    .hero-title {
        font-size: 32pt;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 5mm;
        letter-spacing: 2px;
    }

    .hero-subtitle {
        font-size: 24pt;
        font-weight: bold;
        margin-bottom: 3mm;
    }

    .hero-meta {
        font-size: 16pt;
        opacity: 0.9;
    }

    .hero-branding {
        position: absolute;
        top: 5mm;
        left: 5mm;
        font-size: 16pt;
        font-weight: bold;
        letter-spacing: 1px;
        color: var(--text-white);
    }

    .hero-type {
        position: absolute;
        top: 5mm;
        right: 5mm;
    }

    /* Content Layout Organism */
    .content-layout {
        width: 100%;
        height: 130mm;
        display: table;
        table-layout: fixed;
    }

    .content-column {
        display: table-cell;
        vertical-align: middle;
        padding: 8mm;
    }

    .column-left {
        width: 30%;
        border-right: 1px solid var(--border-light);
    }

    .column-center {
        width: 40%;
        text-align: center;
    }

    .column-right {
        width: 30%;
        border-left: 1px solid var(--border-light);
    }

    /* Section Blocks Organism */
    .section-block {
        margin-bottom: 5mm;
    }

    .section-title {
        font-size: 10pt;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 3mm;
    }

    /* Event Details Table Organism */
    .details-table {
        width: 100%;
        border-collapse: collapse;
    }

    .details-row {
        height: 7mm;
    }

    .details-label {
        font-size: 8pt;
        color: var(--text-secondary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        width: 35%;
    }

    .details-value {
        font-size: 10pt;
        color: var(--text-primary);
        font-weight: 500;
    }

    /* Footer Organism */
    .footer {
        width: 100%;
        height: 30mm;
        background: var(--bg-light);
        border-top: 1px solid var(--border-light);
        display: table;
    }

    .footer-content {
        display: table-cell;
        vertical-align: middle;
        padding: 5mm 10mm;
    }

    .footer-sponsors {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100%;
    }

    .sponsor-logo {
        max-height: 15mm;
        max-width: 40mm;
        opacity: 0.8;
        filter: grayscale(20%);
    }

    /* Print Optimization */
    @media print {
        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            color-adjust: exact;
        }
    }
</style>