/* Every colour and size the app uses is named here. To restyle the app,
   change this file; to try a different look without touching it, put the
   overrides in css/variants/ and see e2e/gallery.sh. */

:root {
    /* ── colours ─────────────────────────────────────────────────────────── */
    --color-bg: #000000;                /* the page, inputs, code */
    --color-surface: #030303;           /* header, sidebar, panels, cards */
    --color-fill: #1c1c1f;              /* buttons, the selected row, pills */
    --color-border: #222226;
    --color-highlight: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); /* a message that mentions you */
    --color-text: #e4e4e7;
    --color-text-muted: #94949c;
    --color-accent: #7aa2f7;
    --color-on-accent: #17120a;         /* text on accent, success, danger */
    --color-danger: #f0716f;
    --color-success: #4cc38a;           /* online, in a call, speaking */
    --color-warning: #d9b44a;           /* away, waiting */
    --color-media-bg: #000;             /* behind video */
    --color-scrim: rgba(0,0,0,.55);     /* behind text laid over video, behind a drawer */
    --color-hover: rgba(255,255,255,.04); /* a message or row under the pointer */
    --color-on-avatar: #fff;

    /* Letter avatars take their hue from the name; the rest is decided here. */
    --avatar-saturation: 35%;
    --avatar-lightness: 38%;

    /* ── type ────────────────────────────────────────────────────────────── */
    /* Emoji are drawn from our own font wherever it has them, so they look
       the same on every device; the font holds nothing but emoji. */
    --font-emoji: 'Noto Color Emoji';
    --font: var(--font-emoji), system-ui, sans-serif;
    --font-mono: var(--font-emoji), monospace;
    --text-base: 15px;              /* every other size is relative to this */
    --line-height: 1.4;
    --text-xs: .8rem;               /* timestamps, badges, section labels */
    --text-s: .9rem;                /* hints, topics, secondary lines */
    --text-l: 1.1rem;               /* room and section titles */
    --text-xl: 1.3rem;
    --text-xxl: 1.6rem;

    /* ── space ───────────────────────────────────────────────────────────── */
    /* One knob for how tight the whole app is: .8 is compact, 1.25 roomy. */
    --density: 1;
    --space-1: calc(.1rem * var(--density));
    --space-2: calc(.2rem * var(--density));
    --space-3: calc(.3rem * var(--density));
    --space-4: calc(.4rem * var(--density));
    --space-5: calc(.5rem * var(--density));
    --space-6: calc(.6rem * var(--density));
    --space-7: calc(.8rem * var(--density));
    --space-8: calc(1rem * var(--density));
    --space-9: calc(1.6rem * var(--density));
    --space-10: calc(2rem * var(--density));
    --space-11: calc(3rem * var(--density));

    /* ── shape ───────────────────────────────────────────────────────────── */
    --radius-s: 4px;                /* inline code, spoilers, thumbnails */
    --radius-m: 6px;                /* buttons, inputs, rows */
    --radius-l: 8px;                /* cards, pictures, video tiles */
    --radius-pill: 999px;           /* badges, reactions */
    --radius-round: 50%;            /* status dots */
    --radius-avatar: 50%;

    /* ── layout ──────────────────────────────────────────────────────────── */
    --sidebar-width: 260px;
    --panel-width: 300px;
    --panel-width-wide: 520px;
    --avatar-size: 28px;
    --avatar-size-message: 38px;    /* beside a message, in the gutter */
    --avatar-size-small: 16px;
    --avatar-size-inline: 20px;     /* a space in the sidebar */
    --avatar-size-big: 64px;
    --reading-width: 760px;         /* settings, search, admin */
    --bar-height: 3.2rem;           /* a room's title bar, the sidebar's head */
    --icon-size: 1.25rem;
    --icon-stroke: 1.75;            /* line weight of the icons, on a 24 grid */
    --control-size: 2rem;           /* a button that is only an icon */
    --stage-height: 60vh;           /* a call's pictures, until dragged */
    --stage-corner-height: 7rem;    /* our own picture in the stage's corner */
    --stage-row-height: 6rem;       /* the row under a focused picture */
    --crop-side: 18rem;             /* the frame a picture is adjusted in */
    --picker-width: 22rem;          /* the emoji picker */
    --picker-height: 16rem;
    --picker-cell: 2.4rem;
}