@import "tailwindcss";

@theme {
    --font-mono:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-muted: #666666;
    --color-border: #000000;
    --color-border-light: #cccccc;
    --color-hover: #eeeeee;
    --color-well: #f5f5f5;
    --color-danger-well: #fef2f2;
    --color-section: #dddddd;
}

html.dark {
    --color-bg: #000000;
    --color-fg: #ffffff;
    --color-muted: #aaaaaa;
    --color-border: #ffffff;
    --color-border-light: #444444;
    --color-hover: #222222;
    --color-well: #1a1a1a;
    --color-danger-well: #2a0a0a;
    --color-section: #2a2a2a;
}

body {
    width: 396px;
    overflow-x: hidden;
}

/* Copy-flash feedback: inverts colors then fades back */
.copy-flash-active {
    background-color: var(--color-fg) !important;
    color: var(--color-bg) !important;
    transition: none;
}

.copy-flash-fade {
    transition:
        background-color 225ms ease-out,
        color 225ms ease-out;
}