@import "tailwindcss";
@plugin "flowbite-react/plugin/tailwindcss";

@theme {
    /* ── Fonts ───────────────────────────────────────────────────────────── */
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-data: "IBM Plex Mono", monospace;

    /* ── Surfaces ────────────────────────────────────────────────────────── */
    --color-background: #F7F4EE;
    --color-sidebar: #F2EEE6;
    --color-card: #FDFBF7;
    --color-fields: #F4F0E8;
    --color-panel: #F1ECE3;
    --color-dropzone: #F9F6EF;
    --color-armed: #F6EFE6;
    --color-live-card: #F0EBE1;
    --color-player: #2B2620;
    --color-player-stripe: #3A342C;

    /* ── Ink ─────────────────────────────────────────────────────────────── */
    --color-text-primary: #2B2620;
    --color-text-strong: #35302A;
    --color-text-body: #554D44;
    --color-text-control: #4A423A;
    --color-text-secondary: #6E6559;
    --color-text-table: #7A7166;
    --color-muted: #9A9084;
    --color-faint-mono: #A79C8E;
    --color-on-dark: #FBF8F2;
    --color-on-accent: #FDFBF7;

    /* ── Accents ─────────────────────────────────────────────────────────── */
    --color-accent: #A85A38;
    --color-accent-hover: #94492A;
    --color-accent-light: #C87A52;
    --color-accent-disabled: #C9AE9C;
    --color-olive: #6E7A50;
    --color-olive-hover: #5D6843;
    --color-olive-light: #8A9668;
    --color-live-red: #B5432E;

    /* ── Lines, chips, placeholders ──────────────────────────────────────── */
    --color-hairline: #F0EBE2;
    --color-hover: #E7E0D2;
    --color-chip: #EAE3D7;
    --color-chip-hover: #DAD1C0;
    --color-ring-dashed: #E2DACB;
    --color-inactive: #DED7CA;
    --color-inactive-strong: #C4BAA9;

    /* ── Elevation — soft shadows instead of borders ─────────────────────── */
    --shadow-card: 0 1px 2px rgba(60, 48, 32, .05), 0 10px 26px -18px rgba(60, 48, 32, .35);
    --shadow-card-hover: 0 2px 4px rgba(60, 48, 32, .07), 0 18px 34px -18px rgba(60, 48, 32, .45);
    --shadow-panel: 0 1px 2px rgba(60, 48, 32, .05), 0 16px 36px -22px rgba(60, 48, 32, .3);
    --shadow-player: 0 1px 2px rgba(60, 48, 32, .08), 0 22px 46px -26px rgba(60, 48, 32, .5);
    --shadow-terracotta: 0 1px 2px rgba(90, 40, 20, .2), 0 12px 22px -14px rgba(90, 40, 20, .55);
    --shadow-olive: 0 1px 2px rgba(50, 60, 30, .18), 0 10px 20px -14px rgba(50, 60, 30, .55);

    --inset-shadow-hairline: inset 0 0 0 1px rgba(60, 48, 32, .08);
    --inset-shadow-armed: inset 0 0 0 1.5px #A85A38;
    --inset-shadow-focus: inset 0 0 0 1.5px #C87A52;
    --inset-shadow-dashed: inset 0 0 0 1.5px #E2DACB;

    /* ── Shape ───────────────────────────────────────────────────────────── */
    --radius-hero: 16px;
    --radius-panel: 15px;
    --radius-tile: 13px;
    --radius-thumb: 12px;
    --radius-field: 10px;
    --radius-btn: 9px;
    --radius-chip: 8px;

    /* ── Motion — the live dot, plus the player's one-shot action badge ──── */
    --animate-live-pulse: livePulse 2.2s ease-in-out infinite;
    --animate-flash-badge: flashBadge 500ms ease-out forwards;

    @keyframes livePulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: .45; transform: scale(1.35); }
    }

    @keyframes flashBadge {
        0% { opacity: 0; transform: scale(.75); }
        25% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.4); }
    }
}

:root {
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-background);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    color: var(--color-text-body);
}

@utility font-heading {
    font-family: "Newsreader", serif;
    font-weight: 400;
    color: #2B2620;
}