/*
Media queries cannot have variables, so here are media queries you can copy-paste as necessary:

$breakpoint-not-small: screen and (min-width: 35em)
$breakpoint-medium: screen and (min-width: 35em) and (max-width: 60em)
$breakpoint-large: screen and (min-width: 60em)
*/

@import "tachyons-vars.css";

/* 
 * COLOR GUIDE:
 * 
 * Generally speaking, all text and backgrounds use the same palette of
 * colors, which are various shades of gray. These are --c1 through --c5.
 *
 * --c1: Alternate page background color. Use when you need a different
 *       background color for variety.
 * --c2: Primary page background color.
 * --c3: Background color for content boxes. Works on both --c1 and --c2.
 * --c4: Color of borders and lines.
 * --c5: Color of disabled inputs.
 */

:root {
    /* TODO(redesign): Probably not the right color for Soft Gray. Check with Jes. */
    --c1: #fafafa;
    --c2: #f3f3f3;
    --c3: #dbdbdb;
    --c4: #c1c1c1;
    /* TODO(redesign): Need a --c5. */

    --c-transparent-background: #fffffff3;

    --red: #c61d24;

    --color: #000;
    --link-color: #d12991;

    --timeline-media-background: #b4b4b466;

    --unread-color: #9498ff;

    --border-color: var(--c4);
    --border-color-focused: #4e55ff;
    --border-color-error: #ff3a3a;

    --button-color: var(--c3);
    --button-color-primary: #ee84ff;

    /* TODO(redesign): Audit these colors. */
    --notice-hiatus-color: #aa7d30;
    --notice-dead-color: #b42222;
    --notice-lts-color: #43a52f;
    --notice-success-color: #43a52f;
    --notice-warn-color: #aa7d30;
    --notice-failure-color: #b42222;

    --site-width: 58rem;
    --site-width-narrow: 44rem;

    --avatar-size-small: 1.5rem;
    --avatar-size-normal: 2.5rem;

    /* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
    --theme-color: #b1b1b1;
    --theme-color-dim: #c0c0c0;
    --theme-color-dimmer: #dddddd;
    --theme-color-dimmest: #f0f0f0;

    --theme-color-dark: #666;
    --theme-color-light: #666;

    --main-background-color: #f8f8f8;
    --main-background-color-transparent: rgba(#f8f8f8, 0);

    --forum-thread-read-color: #555;
    --forum-thread-read-link-color: #888;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #fff;
        --link-color: #ff5dc2;
        --color-error: #ff6666;

        --c1: #1f1f1f;
        --c2: #2f2f2f;
        --c3: #494949;
        --c4: #595959;
        --c5: #cbcbcb;

        --c-transparent-background: #242424da;

        --button-color-primary: #c900ea;

        /* TODO(redesign): Audit these colors. */
        --notice-hiatus-color: #876327;
        --notice-dead-color: #7a2020;
        --notice-lts-color: #2a681d;
        --notice-success-color: #2a681d;
        --notice-warn-color: #876327;
        --notice-failure-color: #7a2020;

        /* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
        --theme-color: #666;
        --theme-color-dim: #444;
        --theme-color-dimmer: #383838;
        --theme-color-dimmest: #333;

        --theme-color-dark: #666;
        --theme-color-light: #666;

        --main-background-color: #202020;
        --main-background-color-transparent: rgba(#202020, 0);

        --forum-thread-read-color: #777;
        --forum-thread-read-link-color: #999;
    }
}