/*
  Kirator Designs — shared web tokens
  SOURCE OF TRUTH: Construct Control Room (:root)
  Drop this file into any Flask / static HTML app.
*/

:root {
    --bg: #0E1911;
    --panel: #131E16;
    --surface: #1A291E;
    --border: #243828;
    --green: #4C7452;
    --mid: #6BAF72;
    --bright: #96DA9D;
    --text: #D4E8D6;
    --dim: #7A9A7E;
    --warn: #D4A84B;
    --bad: #C45C5C;
    --ok: #6BAF72;
    --glow: rgba(107, 175, 114, 0.35);
    --radius: 10px;
    --font: 'DM Sans', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Marketplace aliases (same hex) */
:root {
    --bg-2: var(--panel);
    --bg-3: var(--surface);
    --line: var(--border);
    --text-dim: var(--dim);
    --accent: var(--mid);
    --accent-2: var(--bright);
    --accent-deep: var(--green);
}

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(76, 116, 82, 0.18), transparent 55%),
        radial-gradient(900px 500px at 90% 0%, rgba(150, 218, 157, 0.08), transparent 50%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(76,116,82,0.035) 1px, transparent 1px) 0 0 / 100% 48px,
        linear-gradient(90deg, rgba(76,116,82,0.035) 1px, transparent 1px) 0 0 / 48px 100%;
    pointer-events: none;
    z-index: 0;
}

.kira-shell { position: relative; z-index: 1; }

.kira-brand-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 6px;
    box-shadow: 0 0 28px rgba(150, 218, 157, 0.16);
}

.kira-panel {
    background: linear-gradient(165deg, rgba(26,41,30,0.95), rgba(19,30,22,0.98));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.kira-btn {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 9px 12px;
    cursor: pointer;
}

.kira-btn-primary {
    background: linear-gradient(180deg, rgba(76,116,82,0.45), rgba(26,41,30,0.9));
    border-color: var(--green);
    color: var(--bright);
}

.kira-btn-primary:hover {
    background: linear-gradient(180deg, rgba(107,175,114,0.4), rgba(26,41,30,0.95));
    box-shadow: 0 0 20px var(--glow);
}

.kira-btn-ghost {
    background: transparent;
}