/* Skerry client area.
 *
 * Nexus draws nearly everything from the variables below: buttons, cards, borders, text,
 * corners. Setting them to Skerry's colours and radii restyles the whole client area without
 * touching a template. The rules after the variables cover what the variables do not reach.
 *
 * Colours are the Skerry brand: ink #0F1C22, slate #27343B, granite #5C6A70, mist #D5DAD7,
 * paper #F4F2ED, sea #2C6B78, lichen #E2A012.
 */

@font-face { font-family: "Skerry Sans"; font-weight: 400; font-display: swap; src: url("../fonts/skerry-400.woff") format("woff"); }
@font-face { font-family: "Skerry Sans"; font-weight: 500; font-display: swap; src: url("../fonts/skerry-500.woff") format("woff"); }
@font-face { font-family: "Skerry Sans"; font-weight: 600; font-display: swap; src: url("../fonts/skerry-600.woff") format("woff"); }
@font-face { font-family: "Skerry Sans"; font-weight: 700; font-display: swap; src: url("../fonts/skerry-700.woff") format("woff"); }

:root {
    --white: #fff;

    /* Warm greys taken from the brand, not Nexus's cool ones */
    --neutral-50: #f8f7f3;
    --neutral-100: #f4f2ed;
    --neutral-200: #e6e4dd;
    --neutral-300: #d5dad7;
    --neutral-400: #aeb9b8;
    --neutral-500: #7d898d;
    --neutral-600: #5c6a70;
    --neutral-700: #3b484e;
    --neutral-800: #27343b;
    --neutral-900: #0f1c22;
    --neutral-950: #0b161b;

    --primary-50: #eef5f6;
    --primary-100: #d7e7ea;
    --primary-200: #b0d0d5;
    --primary-300: #82b2ba;
    --primary-400: #55929d;
    --primary-500: #2c6b78;
    --primary-600: #245a65;
    --primary-700: #1d4952;
    --primary-800: #163840;
    --primary-900: #10282e;
    --primary-950: #0b1c20;

    --primary: var(--neutral-900);
    --primary-lifted: var(--neutral-800);
    --primary-accented: var(--neutral-700);

    --secondary: var(--neutral-600);
    --secondary-lifted: var(--neutral-700);
    --secondary-accented: var(--neutral-800);

    --success: #2f7d5b;
    --success-lifted: #276a4d;
    --success-accented: #1f573f;

    --info: #2c6b78;
    --info-lifted: #245a65;
    --info-accented: #1d4952;

    --notice: #2c6b78;
    --notice-lifted: #245a65;
    --notice-accented: #1d4952;

    /* Lichen is too light for text on white, so warnings use a deeper amber */
    --warning: #a86f00;
    --warning-lifted: #8f5e00;
    --warning-accented: #764d00;

    --error: #b4412f;
    --error-lifted: #9b3727;
    --error-accented: #822e20;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-600);
    --neutral-lifted: var(--neutral-700);
    --neutral-accented: var(--neutral-800);

    --text-inverted: #f4f2ed;
    --text-muted: var(--neutral-500);
    --text-lifted: var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text: var(--neutral-900);

    --border-muted: #e6e4dd;
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    --bg: var(--white);
    --bg-muted: #f8f7f3;
    --bg-lifted: #f4f2ed;
    --bg-accented: #e6e4dd;
    --bg-inverted: var(--neutral-900);

    /* Nexus uses these accents in a few places. This file REPLACES Nexus's own custom.css,
       so every variable that file defines must be defined here too, or those parts lose
       their colour. */
    --yellow-200: #f5dfa6;
    --yellow-300: #e2a012;
    --teal-300: #82b2ba;
    --teal-400: #55929d;
    --emerald-300: #8cc6a8;
    --pink-400: #d98a7c;

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1.0625rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Softer corners than the marketing site: this is an app people work in */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 0.875rem;

    --letter-spacing: -0.005em;
    --disabled-opacity: 35%;

    --skerry-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --skerry-sea: #2c6b78;
    --skerry-lichen: #e2a012;
}

/* Type */
body, button, input, select, textarea, .tooltip, .popover {
    font-family: "Skerry Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
    background: #f8f7f3;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 600; letter-spacing: -0.025em; }
a { color: var(--skerry-sea); }
a:hover { color: var(--neutral-900); }
::selection { background: var(--skerry-lichen); color: var(--neutral-900); }

/* Header: the same ink as the website, so moving between them feels like one place */
#header.header, #header .topbar { background: #0f1c22; border-color: #27343b; }
#header .topbar, #header .topbar .btn, #header .topbar a { color: #aeb9b8; }
#header .topbar .btn:hover, #header .topbar a:hover { color: #f4f2ed; }
#header .navbar, #header .navbar a, #header .navbar .nav-link { color: #f4f2ed; }
#header .navbar .nav-link:hover, #header .navbar .nav-link:focus { color: #fff; }
/* The logo. WHMCS has one logo (assets/img/logo.png) for the header, emails and invoices, and it
   is the dark one because emails and invoices are white. The header is ink, so the light logo
   is painted behind the link and the dark image is kept, invisible, for its size and its alt
   text. Both files are the same wordmark at the same proportions, so they line up exactly. */
#header .navbar-brand { background: url(../img/skerry-logo-reverse.svg) no-repeat left center / auto 28px; }
#header .navbar-brand .logo-img { height: 28px; max-height: 28px; width: auto; opacity: 0; }

/* Buttons respond when pressed */
.btn {
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.35s var(--skerry-ease), box-shadow 0.25s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary:hover, .btn-primary:focus { background: var(--skerry-sea); border-color: var(--skerry-sea); }

/* Fields: a calm sea halo on focus instead of Bootstrap's blue glow */
.form-control, .custom-select {
    border-color: var(--border);
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--skerry-sea);
    box-shadow: 0 0 0 0.25rem rgba(44, 107, 120, 0.16);
}
:focus-visible { outline: 3px solid var(--skerry-lichen); outline-offset: 2px; }

/* Cards lift a little, so the page reads as layers */
.card, .panel {
    border-color: var(--border-muted);
    box-shadow: 0 1px 2px rgba(15, 28, 34, 0.04), 0 0.75rem 1.5rem -1.25rem rgba(15, 28, 34, 0.25);
}

/* The strip under the header: quiet, not a grey band */
.master-breadcrumb { background-color: transparent; border-bottom: 1px solid var(--border-muted); }
.master-breadcrumb .breadcrumb { background-color: transparent; }

/* Alerts in brand tints instead of Bootstrap's pastels */
.alert { border-radius: var(--rounding-md); }
.alert-info { background: #eef5f6; border-color: #d7e7ea; color: #1d4952; }
.alert-success { background: #edf5f0; border-color: #d3e8dc; color: #1f573f; }
.alert-warning { background: #fbf3e0; border-color: #f2e0b3; color: #764d00; }
.alert-danger { background: #f8ece9; border-color: #efd2cc; color: #822e20; }

/* Home tiles: the coloured line under each count, in brand colours */
.tiles .tile .stat { font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
.tiles .tile .highlight.bg-color-blue { background-color: #2c6b78 !important; }
.tiles .tile .highlight.bg-color-green { background-color: #2f7d5b !important; }
.tiles .tile .highlight.bg-color-red { background-color: #e2a012 !important; }
.tiles .tile .highlight.bg-color-gold { background-color: #5c6a70 !important; }

/* Tables and lists: quieter rules */
.table td, .table th { border-color: var(--border-muted); }
.list-group-item { border-color: var(--border-muted); }

/* Thin scrollbars, as on the website */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-400) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .custom-select { transition: none; }
    .btn:active { transform: none; }
}