/* Visual language from docs/design/mobile-companion-v2-ui-direction.md (issue #63) */

:root,
:root[data-theme="dark"] {
    --companion-ground: #14110c;
    --companion-surface: #1e1a12;
    --companion-surface-raised: #2a2318;
    --companion-text: #f2e9d8;
    --companion-text-muted: #b8ac95;
    --companion-brass: #c08a34;
    --companion-brass-soft: rgba(192, 138, 52, 0.16);
    --companion-ember: #b5502e;
    --companion-ember-soft: rgba(181, 80, 46, 0.18);
    --companion-emerald: #3f7d5c;
    --companion-border: rgba(242, 233, 216, 0.12);
}

:root[data-theme="light"] {
    --companion-ground: #f4ede0;
    --companion-surface: #ffffff;
    --companion-surface-raised: #fbf6ec;
    --companion-text: #2a2318;
    --companion-text-muted: #6e6350;
    --companion-brass: #9c6b22;
    --companion-brass-soft: rgba(156, 107, 34, 0.12);
    --companion-ember: #a1462a;
    --companion-ember-soft: rgba(161, 70, 42, 0.12);
    --companion-emerald: #2f6347;
    --companion-border: rgba(42, 35, 24, 0.12);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --companion-ground: #f4ede0;
        --companion-surface: #ffffff;
        --companion-surface-raised: #fbf6ec;
        --companion-text: #2a2318;
        --companion-text-muted: #6e6350;
        --companion-brass: #9c6b22;
        --companion-brass-soft: rgba(156, 107, 34, 0.12);
        --companion-ember: #a1462a;
        --companion-ember-soft: rgba(161, 70, 42, 0.12);
        --companion-emerald: #2f6347;
        --companion-border: rgba(42, 35, 24, 0.12);
    }
}

.companion-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--companion-ground);
    color: var(--companion-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.companion-title {
    font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
}

.companion-stat {
    font-variant-numeric: tabular-nums;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.companion-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1rem 5.5rem;
}

.companion-card {
    background: var(--companion-surface);
    border: 1px solid var(--companion-border);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}

.companion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: var(--companion-brass-soft);
    color: var(--companion-brass);
}

.companion-chip.urgent {
    background: var(--companion-ember-soft);
    color: var(--companion-ember);
}

.companion-chip.ready {
    background: rgba(63, 125, 92, 0.16);
    color: var(--companion-emerald);
}

.companion-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    display: flex;
    background: var(--companion-surface-raised);
    border-top: 1px solid var(--companion-border);
    padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom));
}

.companion-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0;
    color: var(--companion-text-muted);
    text-decoration: none;
    font-size: 0.72rem;
    border-radius: 0.6rem;
}

.companion-nav-item.active {
    color: var(--companion-brass);
    background: var(--companion-brass-soft);
}

.companion-text-muted {
    color: var(--companion-text-muted);
    font-size: 0.85rem;
}

.companion-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--companion-border);
    border-radius: 0.6rem;
    background: var(--companion-surface);
    color: var(--companion-text);
    padding: 0.5rem 0.7rem;
}

.companion-button {
    border: 1px solid var(--companion-border);
    border-radius: 0.6rem;
    background: var(--companion-surface-raised);
    color: var(--companion-text);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.companion-button.primary {
    background: var(--companion-brass-soft);
    color: var(--companion-brass);
    border-color: var(--companion-brass);
}

.companion-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.companion-link-button {
    background: none;
    border: none;
    color: var(--companion-ember);
    cursor: pointer;
    font-size: 0.8rem;
}