/* The colours of the interface, and what each of them means.
 *
 * Two sets are stated here and nowhere else. The brand's own colours — the
 * blue and the cyan of the mark, which meet in its gradient, and the amber
 * every call to action wears. And one colour per subject area.
 *
 * A colour is a name for a subject. Members are blue wherever members are,
 * in the sidebar, on their own pages and on the feature card that advertises
 * them; the books are teal, receipts green, the bank cyan. Areas a treasurer
 * switches between all day are kept apart in hue; areas that belong together
 * — the bank and the direct debit that runs over it — are allowed to be
 * close, because that likeness says something true.
 *
 * Which page belongs to which area is decided in core/domains.py. This file
 * only says what an area looks like.
 */

:root {
    --cn-blue: #2563eb;
    --cn-cyan: #06b6d4;
    --cn-ink: #0b1220;

    /* The mark's gradient, as stops rather than as a finished background, so
       every surface can set its own angle and still be the same gradient.
       The cyan end is the mark's, taken down until white text clears 4.5:1
       on it: the mark's own cyan reaches 2.5:1 and cannot carry a sentence.
       Where nothing is written on it — a dot, a chip, a hairline — the pure
       cyan is used. */
    --cn-gradient: var(--cn-blue) 0%, #0e7490 100%;

    /* The action colour. Amber is the one hue the mark does not contain,
       which is why it can sit on the brand blue and still be the first thing
       the eye lands on. It belongs to actions only and to no subject area. */
    --cn-accent: #f59f00;
    --cn-accent-hover: #ffb224;
    --cn-accent-ink: #201700;

    /* The subject areas. */
    --cn-domain-members: #2563eb;   /* people: the register, profiles, membership types */
    --cn-domain-meetings: #ae3ec9;  /* meetings, agendas, motions, decisions */
    --cn-domain-books: #0ca678;     /* the double entry itself: journal, accounts, years */
    --cn-domain-receipts: #2f9e44;  /* what members hand in, and the paper behind an entry */
    --cn-domain-dues: #d6336c;      /* membership fees: what is owed, and how it is collected */
    --cn-domain-banking: #0e9bb8;   /* the bank: statements, imported lines, bank accounts */
    --cn-domain-reports: #e8590c;   /* what the association act asks for at the end of a year */
    --cn-domain-system: #7048e8;    /* settings, API keys, everything technical */
}

/* Each area sets --cn-hue, and every coloured part below reads that one
   variable. A page states its area once; the chip, the card edge and the
   headings under it follow without naming a colour again. */
.cn-domain-members { --cn-hue: var(--cn-domain-members); }
.cn-domain-meetings { --cn-hue: var(--cn-domain-meetings); }
.cn-domain-books { --cn-hue: var(--cn-domain-books); }
.cn-domain-receipts { --cn-hue: var(--cn-domain-receipts); }
.cn-domain-dues { --cn-hue: var(--cn-domain-dues); }
.cn-domain-banking { --cn-hue: var(--cn-domain-banking); }
.cn-domain-reports { --cn-hue: var(--cn-domain-reports); }
.cn-domain-system { --cn-hue: var(--cn-domain-system); }

/* --------------------------------------------------------------- chip */

/* A rounded square filled with a gradient, on the mark's diagonal and with
   its light end in the same corner: the chip is the mark, in the colour of
   whatever it stands for. The same object carries a feature on the public
   site and a page title inside the application. */
.cn-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6875rem;
    background: linear-gradient(135deg,
        var(--cn-hue), color-mix(in srgb, var(--cn-hue) 68%, #ffffff));
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
}

/* The size a chip takes when it stands on its own, above a heading, rather
   than beside one. */
.cn-chip--lg {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.8125rem;
    font-size: 1.375rem;
}

/* ------------------------------------------------------- page and card */

/* The page title wears its area's chip, so the area is legible before a
   single word is read. */
.page-title-icon:not(:empty) {
    margin-right: 0.625rem;
}

/* The card a page is written on carries a bar in the area's colour along
   its top edge, fading out to the right the way the mark's gradient
   lightens towards its far corner. */
.cn-card-domain {
    position: relative;
    overflow: hidden;
}

.cn-card-domain::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg,
        var(--cn-hue), color-mix(in srgb, var(--cn-hue) 40%, transparent));
}

/* ------------------------------------------------------------ sidebar */

/* The sidebar is rendered by conjunto, which prints an entry's icon and
   nothing else this file could hook into — so the icon is the key. Icon and
   colour both belong to the area, and both are chosen in the menus.py of
   the app that owns the entry: change one there and change the other here.
   An entry with no rule keeps the theme's own icon colour, which is what a
   neutral entry like the dashboard should have. */
.nav-link-icon .ti-users { color: var(--cn-domain-members); }

.nav-link-icon .ti-calendar-event,
.nav-link-icon .ti-calendar-plus,
.nav-link-icon .ti-file-text { color: var(--cn-domain-meetings); }

.nav-link-icon .ti-wallet,
.nav-link-icon .ti-calendar { color: var(--cn-domain-books); }

.nav-link-icon .ti-inbox,
.nav-link-icon .ti-receipt { color: var(--cn-domain-receipts); }

.nav-link-icon .ti-repeat { color: var(--cn-domain-dues); }

.nav-link-icon .ti-building-bank { color: var(--cn-domain-banking); }

.nav-link-icon .ti-report-money,
.nav-link-icon .ti-scale { color: var(--cn-domain-reports); }

.nav-link-icon .ti-settings,
.nav-link-icon .ti-plug { color: var(--cn-domain-system); }

/* The selected entry is told apart by the theme's own active state; a
   coloured icon on top of it would compete with that, so it steps back to
   the same colour as the label. */
.nav-link.active .nav-link-icon i {
    color: inherit;
}