/* Genyad app theme — one palette for every page.
 *
 * These tokens used to be copy-pasted into a :root block on each template, which is why the
 * campaigns page, the asset manager, the annotator and the account pages had drifted into
 * slightly different palettes and the video editor into a different one entirely. They live
 * here now; a page that wants a colour takes it from this file.
 *
 * The palette itself follows the video editor's, which is modelled on how edit suites are put
 * together: a neutral, near-black chrome (a violet or blue cast tints every thumbnail,
 * screenshot and frame of footage sitting on top of it), one accent worn only by the primary
 * action, and colour otherwise reserved for meaning — blue "do this", red "this destroys
 * something", green "this succeeded".
 *
 * Names are kept exactly as the pages already used them, so existing rules keep working.
 */
:root {
    /* --- surfaces ------------------------------------------------------------------- */
    --dark-bg: #131316;              /* page background */
    --dark-surface: #1b1b1f;         /* cards, panels */
    --dark-surface-raised: #232329;  /* controls, rows, anything sitting on a panel */
    --dark-elevated: #2b2b32;        /* hover state for the above */
    --dark-border: #2e2e36;
    --dark-border-strong: #3b3b45;

    /* --- type ---------------------------------------------------------------------- */
    --light-text: #eceef2;
    --medium-text: #9b9ba6;

    /* --- the one accent ------------------------------------------------------------ */
    --primary-accent: #3d7dff;
    --primary-accent-hover: #5590ff;
    --primary-accent-soft: rgba(61, 125, 255, 0.14);
    --primary-accent-border: rgba(61, 125, 255, 0.38);

    /* --- buttons -------------------------------------------------------------------
     * Flat fills. The gradients-with-a-coloured-glow these replace are the house style of
     * consumer apps and read as decoration on a tool people work in all day. The -start and
     * -end pairs are kept pointing at the same colour so any remaining gradient rule renders
     * flat rather than breaking. */
    --btn-primary-bg: #3d7dff;
    --btn-primary-bg-hover: #5590ff;
    --btn-primary-start: #3d7dff;
    --btn-primary-end: #3d7dff;
    --btn-primary-shadow: rgba(0, 0, 0, 0.35);

    --btn-positive-bg: #2f6f57;
    --btn-positive-bg-hover: #3a8568;
    --btn-positive-start: #2f6f57;
    --btn-positive-end: #2f6f57;
    --btn-positive-shadow: rgba(0, 0, 0, 0.35);

    --btn-danger-bg: #8c4646;
    --btn-danger-bg-hover: #a05353;
    --btn-danger-start: #8c4646;
    --btn-danger-end: #8c4646;
    --btn-danger-shadow: rgba(0, 0, 0, 0.35);

    --btn-ghost-bg: #232329;
    --btn-ghost-bg-hover: #2b2b32;
    --btn-ghost-text: #d5d7de;
    --btn-ghost-border: #3b3b45;
    --btn-disabled-bg: #232329;
    --btn-disabled-text: #6b6b76;

    /* --- semantic ------------------------------------------------------------------ */
    --success-color: #4c9d7a;
    --danger-color: #c96a6a;
    --danger-color-hover: #a05353;
    --error-red: #c96a6a;
    --warning-color: #c9a227;

    /* --- odds and ends the pages reference ------------------------------------------ */
    --dropdown-bg: #232329;
    --dropdown-item-hover: #2b2b32;
    --hover-bg: #2b2b32;
    --tag-bg: #232329;
    --tag-border: #3b3b45;

    /* --- campaign tone -------------------------------------------------------------
     * The one place hue carries information: a campaign's tone also decides the caption
     * colours its ads are generated with (FALLBACK_DESIGN_BY_TONE in
     * code_base/src/caption_typography.py), so the same hue here previews what an ad will
     * look like. Used as a tint and a hairline, never as a filled block. */
    --tone-professional: #7FC8FF;
    --tone-energetic: #FFC53F;
    --tone-inspiring: #8FE3C4;
    --tone-friendly: #FFB86B;
    --tone-playful: #FF8FD0;
    --tone-calm: #9FD8E8;
}