/* ============================================================================
 * RaneWorks brand layer for Kauoha
 * https://www.raneworks.com/brand-guidelines.html
 *
 * WHAT THIS IS
 *   One place that decides what "our purple" means, plus the overrides that
 *   put it on buttons and common elements. Loaded AFTER UIkit and master.css
 *   so it wins without anyone editing the UIkit build.
 *
 * WHY IT EXISTS
 *   Before this, three near-identical purples were in circulation and none of
 *   them was the brand value:
 *     #694bcd  master.css header, email modal, service status
 *     #6b4dd3  quantity rules, order comparison, badges, cron emails
 *     #6B4DD1  the actual brand purple
 *   Every new screen picked whichever was nearest to hand. One token stops
 *   that recurring.
 *
 * LIGHT UI, DARK GUIDELINES
 *   The brand page is written for the marketing site, which sits on near-black
 *   surfaces. Kauoha is a light admin tool, so the Light Band values are the
 *   relevant ones and the dark surface colours are deliberately absent here.
 *
 *   The one place we knowingly depart: ORCHID (#b9a8e6) is listed as an accent
 *   for eyebrows, links and arrows. That is sound on #131019. On white it
 *   measures 2.14:1, far below the 4.5:1 needed for body text, so here it is
 *   allowed on borders and fills ONLY and never carries text.
 *
 * WHAT IS DELIBERATELY NOT TOUCHED
 *   Status colours. Invoiced blue, submitted green, draft orange and the
 *   comparison screen's difference colours encode meaning that people have
 *   learned to read. Rebranding them would trade comprehension for
 *   consistency. See media/css/order-status-badge.css.
 *
 *   Their existing pairings were also already correct: green and orange fail
 *   against white text (1.95:1 and 2.05:1) and the badge CSS pairs both with
 *   dark ink instead, which scores AAA.
 * ========================================================================= */

:root {
    /* Purple ramp. Default, hover, pressed. */
    --rw-purple:        #6B4DD1;   /* Brand Purple, matches the logo */
    --rw-purple-hover:  #8a6fe6;   /* Bright Purple */
    --rw-purple-active: #4a2f93;   /* Deep Purple */
    --rw-orchid:        #b9a8e6;   /* borders and fills only, never text */

    /* Light band. */
    --rw-band:          #f4f3f7;   /* page background */
    --rw-surface:       #ffffff;   /* cards */
    --rw-ink:           #1b1623;   /* headings and body */
    --rw-muted:         #6f6880;   /* captions and meta */
    --rw-hairline:      #e4e2ea;   /* borders and dividers */

    /* Tints derived from the ramp, for hover fills and focus rings. */
    --rw-purple-tint:   #f7f5ff;
    --rw-purple-tint-2: #efeaff;
    --rw-focus-ring:    rgba(107, 77, 209, .30);

    /* A surface that sits just off white: inset panels, table headers, alert
       bodies. Warmer than a plain grey because it carries a trace of the
       purple, which is what stops the chrome reading as generic Bootstrap. */
    --rw-surface-alt:   #faf9fc;

    /* Corner radius is 4px per the guidelines. */
    --rw-radius:        4px;

    /* Motion easing from the guidelines. */
    --rw-ease:          cubic-bezier(0.22, 0.68, 0.18, 1);
}

/* ---------------------------------------------------------------- typography
 * Inter is the brand face. Weight 600 for labels and buttons, 300 for large
 * display headings with tight tracking, per the guidelines.
 *
 * The font itself is linked from page-open.php. If that link is ever removed
 * this degrades to the system sans-serif rather than breaking.
 * ------------------------------------------------------------------------- */

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--rw-ink);
}

/* Sentence case for headings, all-caps reserved for small eyebrow labels. */
h1, .uk-h1 { font-weight: 300; letter-spacing: -0.02em; }
h2, .uk-h2 { font-weight: 300; letter-spacing: -0.015em; }
h3, .uk-h3 { font-weight: 500; }

/* ------------------------------------------------------------------- buttons
 * UIkit ships fully rounded pills. The guidelines specify a 4px radius, so
 * these override the shape as well as the colour.
 * ------------------------------------------------------------------------- */

.uk-button {
    border-radius: var(--rw-radius);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    transition: background-color .15s var(--rw-ease),
                border-color .15s var(--rw-ease),
                color .15s var(--rw-ease);
}

.uk-button-primary {
    background-color: var(--rw-purple);
    border: 1px solid var(--rw-purple);
    color: #fff;
}
.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: var(--rw-purple-hover);
    border-color: var(--rw-purple-hover);
    color: #fff;
}
.uk-button-primary:active,
.uk-button-primary.uk-active {
    background-color: var(--rw-purple-active);
    border-color: var(--rw-purple-active);
    color: #fff;
}

/* Secondary reads as the brand's ghost button, translated to a light surface. */
.uk-button-default {
    background-color: var(--rw-surface);
    border: 1px solid var(--rw-hairline);
    color: var(--rw-ink);
}
.uk-button-default:hover,
.uk-button-default:focus {
    border-color: var(--rw-purple);
    background-color: var(--rw-purple-tint);
    color: var(--rw-purple);
}

/* Keyboard focus must stay visible. UIkit removes the outline by default. */
.uk-button:focus-visible,
.uk-input:focus-visible,
.uk-select:focus-visible,
.uk-textarea:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rw-focus-ring);
}

/* --------------------------------------------------------------------- links */

a { color: var(--rw-purple); }
a:hover { color: var(--rw-purple-active); }

/* Inherit colour where a link wraps a component that colours itself. */
a.uk-button:hover,
a.uk-icon-link,
.uk-navbar-nav > li > a { color: inherit; }

/* ------------------------------------------------------------------- inputs */

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--rw-purple);
}

/* --------------------------------------------------------- surfaces and rules */

.uk-card-default {
    border-radius: var(--rw-radius);
    border: 1px solid var(--rw-hairline);
    box-shadow: none;
}

hr, .uk-hr { border-top-color: var(--rw-hairline); }

/* Table headers pick up the brand light band instead of plain grey. */
.uk-table th {
    color: var(--rw-muted);
    border-bottom: 2px solid var(--rw-hairline);
    background: #faf9fc;
}

/* ---------------------------------------------------------------------- tabs */

.uk-tab > .uk-active > a {
    border-color: var(--rw-purple);
    color: var(--rw-purple);
}
.uk-tab > li > a:hover { color: var(--rw-purple); }

/* ------------------------------------------------------------------- badges */

.uk-badge {
    background-color: var(--rw-purple);
    border-radius: 999px;   /* count badges stay circular; 4px would look broken */
}

/* ---------------------------------------------------- brand-purple utilities
 * For the places that currently hardcode a purple inline. Using these instead
 * means the next brand change is one line here, not another sweep.
 * ------------------------------------------------------------------------- */

.rw-purple      { color: var(--rw-purple) !important; }
.rw-purple-bg   { background-color: var(--rw-purple) !important; color: #fff !important; }
.rw-purple-bd   { border-color: var(--rw-purple) !important; }
.rw-tint-bg     { background-color: var(--rw-purple-tint) !important; }