@layer base, layout, components, utilities;

@layer base {
    :root {
        --color-gold: #c5a059;
        --color-white: #ffffff;
        --color-background: #fdfcf9;
        --color-text: #2c3e50;
        --color-text-light: #7f8c8d;
        --color-border: #e0d9cc;
        --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
        --shadow-deep: 0 10px 40px rgba(0, 0, 0, 0.1);
        --font-serif-kr: 'Noto Serif KR', serif;
        --font-serif-en: 'Playfair Display', serif;
    }

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

    body {
        background-color: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-serif-kr);
        line-height: 1.6;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    /* Subtle texture on background */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://www.transparenttextures.com/patterns/paper.png");
        opacity: 0.3;
        z-index: -1;
        pointer-events: none;
    }
}

@layer layout {
    .app-header {
        background-color: var(--color-white);
        padding: 3rem 1rem;
        text-align: center;
        border-bottom: 2px solid var(--color-gold);
        box-shadow: var(--shadow-soft);
    }

    .header-content h1 {
        font-size: 2.5rem;
        color: var(--color-text);
        margin-bottom: 0.5rem;
    }

    .subtitle {
        font-family: var(--font-serif-en);
        font-style: italic;
        color: var(--color-gold);
        letter-spacing: 1px;
    }

    .content-container {
        flex: 1;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        container-type: inline-size;
    }

    .app-footer {
        padding: 2rem;
        text-align: center;
        font-size: 0.85rem;
        color: var(--color-text-light);
        border-top: 1px solid var(--color-border);
    }
}

@layer components {
    /* Styles for the Web Component are mostly inside Shadow DOM, 
       but we can provide some global defaults or variables */
    pope-message-list {
        display: block;
        min-height: 200px;
    }
}

@layer utilities {
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
}

/* Container Queries for responsive adjustments */
@container (max-width: 500px) {
    .header-content h1 {
        font-size: 1.8rem;
    }
}