/*
 * The brand, in one file.
 *
 * Loaded first by every shell — the public site, the customer workspace and the
 * product owner's console — so all three are drawn from the same values rather
 * than from three palettes that were the same colour the day they were written
 * and have drifted since.
 *
 * Nothing below is a component. Every rule here is a token (or the @font-face
 * that a font token names), and app.css and marketing.css map their own
 * prefixed names onto these — so the two stylesheets keep their independent
 * vocabularies (--hr-* and --mk-*) while the colour behind both names is
 * defined exactly once.
 *
 * To rebrand the whole product, change the ramp under "brand" and nothing else.
 *
 * DIRECTION — "Modern plum", taken from the DV Soft logo itself: the
 * aubergine of its tile (#2B103D) for the dark bands, a plum for every action,
 * the lavender of its letters (#CDBADC) for highlights on dark, and a violet
 * glow where a surface needs light. Near-white, faintly lilac neutrals. One
 * modern geometric sans for display (Plus Jakarta Sans) and Inter for reading.
 * The product and the company it comes from are now visibly one brand.
 */

/* ------------------------------------------------------------------ fonts
 *
 * Self-hosted, because the Content-Security-Policy is font-src 'self' (see
 * config/app.php) and because a font CDN is one more third party between a
 * payroll clerk and their screen. Both are variable fonts, so one file per
 * style covers every weight. Latin subset. SIL Open Font License 1.1.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/inter.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
}

:root {
    --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------------------------------------------------------------- brand
     *
     * Plum. Five steps: a tint for fills, a mid for icons, the brand itself for
     * buttons and active states, and two darker steps for hover and for text
     * set on the tint. The brand and everything darker clears 4.5:1 on white
     * and on --brand-50.
     */
    --brand-50:   #f6f1fa;
    --brand-100:  #ebe0f4;
    --brand-300:  #c9b2df;
    --brand-500:  #7c4dab;
    --brand:      #5b2a86;   /* buttons, active nav, focus rings */
    --brand-600:  #4a2170;   /* hover */
    --brand-700:  #3b1a5a;   /* text on a tint */
    --brand-900:  #1d0c29;   /* the aubergine of the dark bands */
    --brand-950:  #12081a;
    --brand-rgb:  91, 42, 134;
    --brand-ink:  #ffffff;   /* what sits on top of --brand */

    /*
     * Lavender, the colour of the logo's letters. It is the highlight on the
     * dark bands — a kicker, an active marker, a word of a headline — and never
     * body text on white; --accent-600 is the step dark enough for that.
     */
    --accent:     #cdbadc;
    --accent-300: #e6dcef;
    --accent-600: #7a4fb0;   /* lavender as text on white: 5.9:1 */
    --accent-50:  #f5f0fb;
    --accent-rgb: 205, 186, 220;

    /* The glow: a clear violet, used only as light — radial washes on dark. */
    --glow-rgb:   139, 92, 246;

    --brand-gradient:      linear-gradient(135deg, #8a5cc0 0%, var(--brand) 55%, var(--brand-700) 100%);
    --brand-gradient-deep: linear-gradient(160deg, #26112f 0%, var(--brand-900) 55%, var(--brand-950) 100%);
    --accent-gradient:     linear-gradient(90deg, #f3ecfa 0%, var(--accent) 45%, #a78bfa 100%);
    --rule-gradient:       linear-gradient(90deg, var(--brand) 0%, #a78bfa 100%);
    --text-gradient:       linear-gradient(90deg, var(--brand) 0%, #8b5cf6 100%);

    /* ---------------------------------------------------------------- ink */
    --ink:        #1a1523;
    --ink-body:   #474255;
    --ink-soft:   #575166;

    /*
     * The micro-labels — table heads, stat captions, eyebrows — are set around
     * 11px, so this grey has to reach 4.5:1 on white, not the 3:1 large text
     * gets away with.
     */
    --ink-faint:  #6a6478;
    --ink-dim:    #a19bab;

    /* ---------------------------------------------------------------- surfaces
     *
     * Near-white with the faintest lilac in it, so the neutrals belong to the
     * plum rather than sitting beside it as a cold grey.
     */
    --surface:    #ffffff;
    --surface-2:  #faf9fc;
    --surface-3:  #f2eff6;
    --canvas:     #f7f5fa;
    --line:       #e8e4ef;
    --line-soft:  #f0edf4;

    /* ---------------------------------------------------------------- semantic
     *
     * Reserved. Green means it happened, red means it did not, amber means
     * somebody is waiting. A neutral count drawn in an alarm colour teaches
     * people to ignore the alarm, so these never decorate.
     */
    --ok:      #16a34a;
    --ok-deep: #15803d;
    --warn:    #b45309;
    --danger:  #be123c;

    /* ---------------------------------------------------------------- shape */
    --r-sm:  9px;
    --r:     12px;
    --r-lg:  18px;
    --r-xl:  26px;
    --r-pill: 999px;

    /*
     * Two-part shadows: a tight one for the edge and a wide, soft one for the
     * lift. Tinted towards the aubergine rather than pure black, so a shadow
     * reads as shade and not as dirt.
     */
    --shadow-xs: 0 1px 2px rgba(29, 12, 41, .05);
    --shadow-sm: 0 1px 2px rgba(29, 12, 41, .05), 0 2px 10px rgba(29, 12, 41, .04);
    --shadow:    0 1px 2px rgba(29, 12, 41, .05), 0 8px 24px -8px rgba(29, 12, 41, .12);
    --shadow-md: 0 2px 4px rgba(29, 12, 41, .05), 0 16px 36px -14px rgba(29, 12, 41, .22);
    --shadow-lg: 0 4px 8px rgba(29, 12, 41, .05), 0 32px 70px -24px rgba(29, 12, 41, .34);

    /* A brand-tinted lift, for the hover state of something already coloured. */
    --shadow-brand: 0 10px 30px -12px rgba(var(--brand-rgb), .55);

    --ease: cubic-bezier(.22, 1, .36, 1);

    /* ---------------------------------------------------------------- module accents
     *
     * A separate, semantic set: these identify Attendance, Leave, Payroll and
     * the rest, and are not the brand. The hues are not arbitrary — money is
     * green, time is blue, reporting is cyan, people are teal, self-service is
     * rose, and the calendar is orange rather than violet so it can never be
     * mistaken for the plum brand — and every one is dark enough to pass 4.5:1
     * on its own tint, because these are used on text and glyphs.
     */
    --acc-employee:   #0f766e;  --acc-employee-soft:   #effcf9;
    --acc-attendance: #1d4ed8;  --acc-attendance-soft: #eff4ff;
    --acc-leave:      #c2410c;  --acc-leave-soft:      #fff4ed;
    --acc-payroll:    #047857;  --acc-payroll-soft:    #ecfdf3;
    --acc-reports:    #0e7490;  --acc-reports-soft:    #ecfeff;
    --acc-ess:        #be123c;  --acc-ess-soft:        #fff1f3;
}

/*
 * A module's colour is set once on a wrapper and inherited by everything inside
 * it, so a card, a page heading and an illustration cannot disagree about which
 * hue the module is. Anything outside one of these falls back to the brand.
 */
.mod-employee   { --acc: var(--acc-employee);   --acc-soft: var(--acc-employee-soft); }
.mod-attendance { --acc: var(--acc-attendance); --acc-soft: var(--acc-attendance-soft); }
.mod-leave      { --acc: var(--acc-leave);      --acc-soft: var(--acc-leave-soft); }
.mod-payroll    { --acc: var(--acc-payroll);    --acc-soft: var(--acc-payroll-soft); }
.mod-reports    { --acc: var(--acc-reports);    --acc-soft: var(--acc-reports-soft); }
.mod-ess        { --acc: var(--acc-ess);        --acc-soft: var(--acc-ess-soft); }