/**
 * Piece of Humanity — Shared Design System
 * Version: 1.0.0
 *
 * Shared between POH admin tools and public pages.
 * All rules are scoped to POH containers/components.
 */

/* ---------------------------------------------------------
   1. Design Tokens
--------------------------------------------------------- */

:root {
    --poh-navy: #01264b;
    --poh-navy-hover: #013766;
    --poh-gold: #b08227;
    --poh-gold-hover: #956d1e;
    --poh-ivory: #f9f4e6;

    --poh-white: #ffffff;
    --poh-text: #243247;
    --poh-muted: #657185;
    --poh-border: #d7dce2;
    --poh-surface: #ffffff;
    --poh-surface-soft: #f7f8fa;

    --poh-success: #237447;
    --poh-warning: #946200;
    --poh-danger: #b42318;

    --poh-radius: 6px;
    --poh-radius-sm: 4px;

    --poh-space-1: 4px;
    --poh-space-2: 8px;
    --poh-space-3: 12px;
    --poh-space-4: 16px;
    --poh-space-5: 24px;
    --poh-space-6: 32px;

    --poh-font: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------
   2. Base Components
--------------------------------------------------------- */

.poh,
[class^="poh-"],
[class*=" poh-"] {
    box-sizing: border-box;
}

.poh,
.poh-panel,
.poh-card {
    color: var(--poh-text);
    font-family: var(--poh-font);
}

.poh h1,
.poh h2,
.poh h3,
.poh h4 {
    color: var(--poh-navy);
    line-height: 1.3;
}

.poh a {
    color: var(--poh-navy);
}

.poh a:hover {
    color: var(--poh-gold-hover);
}

/* ---------------------------------------------------------
   3. Buttons
--------------------------------------------------------- */

.poh .poh-button,
.poh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px;

    border: 1px solid var(--poh-navy);
    border-radius: var(--poh-radius);

    background: var(--poh-navy);
    color: var(--poh-white);

    font: 500 13px/1.35 var(--poh-font);
    text-decoration: none;
    cursor: pointer;

    box-shadow: none;
    transition: background-color 0.15s ease,
        border-color 0.15s ease;
}

.poh-button:hover,
.poh-button:focus {
    background: var(--poh-navy-hover);
    border-color: var(--poh-navy-hover);
    color: var(--poh-white);
}

.poh-button--gold {
    background: var(--poh-gold);
    border-color: var(--poh-gold);
    color: var(--poh-white);
}

.poh-button--gold:hover {
    background: var(--poh-gold-hover);
    border-color: var(--poh-gold-hover);
}

.poh-button--secondary {
    background: var(--poh-white);
    border-color: var(--poh-border);
    color: var(--poh-navy);
}

.poh-button--secondary:hover {
    background: var(--poh-ivory);
    border-color: var(--poh-gold);
    color: var(--poh-navy);
}

.poh-button--danger {
    background: var(--poh-danger);
    border-color: var(--poh-danger);
}

.poh-button:disabled,
.poh-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------------------------------------------------------
   4. Cards and Panels
--------------------------------------------------------- */

.poh-card,
.poh-panel {
    padding: var(--poh-space-4);
    background: var(--poh-surface);
    border: 1px solid var(--poh-border);
    border-radius: var(--poh-radius);
    box-shadow: none;
}

.poh-card--ivory,
.poh-panel--ivory {
    background: var(--poh-ivory);
}

.poh-card__title,
.poh-panel__title {
    margin: 0 0 12px;
    color: var(--poh-navy);
    font-size: 16px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   5. Forms
--------------------------------------------------------- */

.poh-field {
    margin-bottom: 14px;
}

.poh-label {
    display: block;
    margin-bottom: 5px;
    color: var(--poh-navy);
    font-size: 13px;
    font-weight: 600;
}

.poh-input,
.poh-select,
.poh-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 10px;

    background: var(--poh-white);
    border: 1px solid var(--poh-border);
    border-radius: var(--poh-radius);

    color: var(--poh-text);
    font: 13px/1.5 var(--poh-font);
    box-shadow: none;
}

.poh-textarea {
    min-height: 90px;
    resize: vertical;
}

.poh-input:focus,
.poh-select:focus,
.poh-textarea:focus {
    outline: 2px solid rgba(176, 130, 39, 0.25);
    outline-offset: 1px;
    border-color: var(--poh-gold);
}

.poh-help {
    display: block;
    margin-top: 5px;
    color: var(--poh-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------
   6. Tables
--------------------------------------------------------- */

.poh-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--poh-white);
    font-size: 13px;
}

.poh-table th,
.poh-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--poh-border);
    text-align: left;
    vertical-align: top;
}

.poh-table th {
    background: var(--poh-ivory);
    color: var(--poh-navy);
    font-weight: 600;
}

.poh-table tbody tr:hover {
    background: var(--poh-surface-soft);
}

/* ---------------------------------------------------------
   7. Status Labels
--------------------------------------------------------- */

.poh-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.poh-status--success {
    background: #e6f4eb;
    color: var(--poh-success);
}

.poh-status--warning {
    background: #fff3d6;
    color: var(--poh-warning);
}

.poh-status--danger {
    background: #fce8e6;
    color: var(--poh-danger);
}

/* ---------------------------------------------------------
   8. Tabs
--------------------------------------------------------- */

.poh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--poh-border);
}

.poh-tab {
    display: inline-block;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--poh-navy);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.poh-tab:hover {
    background: var(--poh-ivory);
}

.poh-tab.is-active {
    background: var(--poh-white);
    border-color: var(--poh-border);
    color: var(--poh-navy);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. Accessibility
--------------------------------------------------------- */

.poh-button:focus-visible,
.poh-tab:focus-visible {
    outline: 2px solid var(--poh-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .poh-button {
        transition: none;
    }
}