/* wood-theme.css — additive wooden UI overlay for Oikoumene.
 * ui-wooden-theme-overlay / TASK_03.
 * Rules here are purely additive: every .wood-* class is applied
 * alongside existing classes (AC-21 — no original tokens removed).
 * No selector targets the hex render surface or minimap (AC-15).
 */

/* === Tokens ======================================================= */

:root {
    --wood-asset-base:        /static/img/wood;  /* path prefix */
    --wood-frame-slice:       24;                /* 9-slice for bronze frame */
    --wood-frame-iron-slice:  32;
    --wood-frame-rope-slice:  28;
    --wood-radius-panel:      8px;
    --wood-radius-btn:        6px;
}


/* === Panel backgrounds ============================================ */

.wood-panel {
    background-image: url("/static/img/wood/panel-oak-dark.webp");
    background-size: 256px 256px;   /* match seamless tile period */
    background-repeat: repeat;
    border-radius: var(--wood-radius-panel);
    /* scrim so text on top stays at WCAG AA against the texture */
    box-shadow: inset 0 0 0 9999px rgba(20, 16, 12, 0.42);
    color: var(--color-primary, #e8d5b0);
}

/* Variant overrides — only background-image (and scrim where needed).
   All other .wood-panel properties are inherited. */

.wood-panel-oak-dark {
    background-image: url("/static/img/wood/panel-oak-dark.webp");
}

.wood-panel-oak-light {
    background-image: url("/static/img/wood/panel-oak-light.webp");
    box-shadow: inset 0 0 0 9999px rgba(30, 22, 10, 0.30);
}

.wood-panel-parchment {
    background-image: url("/static/img/wood/panel-parchment.webp");
    box-shadow: inset 0 0 0 9999px rgba(40, 30, 20, 0.10);
    color: #2a1f14;
}

.wood-panel-wood-grain {
    background-image: url("/static/img/wood/panel-wood-grain.webp");
}


/* === Buttons ====================================================== */
/* filled by TASK_04 */

.wood-btn {
    background-image: url("/static/img/wood/button-default-md.webp");
    background-size: 100% 100%;
    border: none;
    color: #f5e8c8;
    padding: 12px 24px;
    border-radius: var(--wood-radius-btn);
    cursor: pointer;
    transition: background-image 80ms ease-out, transform 80ms ease-out;
}

.wood-btn:hover {
    background-image: url("/static/img/wood/button-hover-md.webp");
}

.wood-btn:active {
    background-image: url("/static/img/wood/button-active-md.webp");
    transform: translateY(1px);
}

.wood-btn:disabled {
    background-image: url("/static/img/wood/button-disabled-md.webp");
    color: #888;
    cursor: not-allowed;
}

.wood-btn-md {
    /* explicit size variant — matches .wood-btn defaults */
    background-image: url("/static/img/wood/button-default-md.webp");
}

.wood-btn-md:hover    { background-image: url("/static/img/wood/button-hover-md.webp"); }
.wood-btn-md:active   { background-image: url("/static/img/wood/button-active-md.webp"); }
.wood-btn-md:disabled { background-image: url("/static/img/wood/button-disabled-md.webp"); }

.wood-btn-lg {
    padding: 16px 36px;
    background-image: url("/static/img/wood/button-default-lg.webp");
}

.wood-btn-lg:hover    { background-image: url("/static/img/wood/button-hover-lg.webp"); }
.wood-btn-lg:active   { background-image: url("/static/img/wood/button-active-lg.webp"); }
.wood-btn-lg:disabled { background-image: url("/static/img/wood/button-disabled-lg.webp"); }


/* === Frames (9-slice border-image) ================================ */
/* filled by TASK_05 */

.wood-frame {
    border-style: solid;
    border-width: 24px;   /* must match --wood-frame-slice */
    padding: 8px;
    border-image-repeat: stretch;
}

.wood-frame-bronze {
    border-image-source: url("/static/img/wood/frame-bronze-portrait.webp");
    border-image-slice: 24 fill;
}

.wood-frame-iron {
    border-image-source: url("/static/img/wood/frame-iron-rivets.webp");
    border-image-slice: 32 fill;
    border-width: 32px;
}

.wood-frame-rope {
    border-image-source: url("/static/img/wood/frame-rope-circle.webp");
    border-image-slice: 28 fill;
    border-width: 28px;
    border-radius: 50%;
}

.wood-frame-scroll {
    /* Scroll cap frame — top edge only (scroll cap motif). */
    /* border-image-width overrides zero all edges except top so only  */
    /* the top cap strip renders; inner content flows unobstructed.    */
    border-image-source: url("/static/img/wood/frame-scroll-top.webp");
    border-image-slice: 28 fill;
    border-width: 28px 0 0 0;
}


/* === Dividers ===================================================== */
/* filled by TASK_06 */

.wood-divider-rope {
    background-image: url("/static/img/wood/divider-rope.webp");
    height: 12px;
    background-size: contain;
    background-repeat: repeat-x;
    border: none;
}

.wood-divider-engraved {
    background-image: url("/static/img/wood/divider-engraved.webp");
    height: 16px;
    background-size: contain;
    background-repeat: repeat-x;
    border: none;
}


/* === Corner accents =============================================== */
/* filled by TASK_06 */

.wood-corner-tl,
.wood-corner-tr,
.wood-corner-bl,
.wood-corner-br {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.wood-corner-tl {
    top: 0;
    left: 0;
    background-image: url("/static/img/wood/corner-bronze-tl.webp");
}

.wood-corner-tr {
    top: 0;
    right: 0;
    background-image: url("/static/img/wood/corner-bronze-tr.webp");
}

.wood-corner-bl {
    bottom: 0;
    left: 0;
    background-image: url("/static/img/wood/corner-bronze-bl.webp");
}

.wood-corner-br {
    bottom: 0;
    right: 0;
    background-image: url("/static/img/wood/corner-bronze-br.webp");
}


/* === Accent decorations =========================================== */
/* filled by TASK_06 */

.wood-badge-bronze {
    background-image: url("/static/img/wood/badge-bronze.webp");
    background-size: contain;
    background-repeat: no-repeat;
}

.wood-tab {
    background-image: url("/static/img/wood/tab-wood.webp");
    background-size: 100% 100%;
}


/* === Modal interior =============================================== */
/* filled by TASK_07 */

.wood-modal-parchment {
    background-image: url("/static/img/wood/panel-parchment.webp");
    background-size: 384px 384px;
    background-repeat: repeat;
    color: #2a1f14;
}