/*
 * The brand, in one file - DV SOFT.
 *
 * The public product site draws every colour from the tokens below, and
 * marketing.css maps its own names onto them. To restyle the site, change this
 * file and nothing else.
 *
 * Palette taken from dvsoft.in so the healthcare product reads as part of the
 * same company: DV SOFT plum as the brand, warm ink and paper for the page, and
 * - deliberately - no blue anywhere. Orange and red carry energy (the
 * gradient, highlights); green keeps its one job, "this is included / done".
 *
 * Contrast: every colour used for text clears 4.5:1 on white and on its own
 * tint. The bright orange (--accent) is decoration only - gradients, glows,
 * large display type - and --accent-600 is used wherever orange is text.
 */

/* --------------------------------------------------------------- typefaces
 * Self-hosted (Open Font License) - the site's Content-Security-Policy allows
 * fonts only from its own origin, and it keeps the privacy notice true: no
 * request leaves for a third party. Each file is a variable font covering
 * every weight used.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---------------------------------------------------------------- brand
     * DV SOFT plum. Five steps: a tint for fills, a light step for borders
     * and glyphs on dark, the brand for buttons and active states, and two
     * darker steps for hover and for text set on the tint.
     */
    --brand-50:   #f8f1fb;
    --brand-100:  #efe1f6;
    --brand-300:  #c9a6dc;
    --brand-500:  #7a409c;
    --brand:      #602874;   /* buttons, active nav, focus rings */
    --brand-600:  #4a1d58;   /* hover */
    --brand-700:  #3d1749;   /* text on a tint */
    --brand-900:  #1a0e20;   /* the deep end of the dark sections */
    --brand-rgb:  96, 40, 116;
    --brand-ink:  #ffffff;

    /* The accent: a warm orange, with a red between it and the plum. */
    --accent:     #ea580c;   /* decoration only - see the note at the top */
    --accent-600: #c2410c;   /* orange as text */
    --accent-50:  #fff4ed;
    --accent-rgb: 234, 88, 12;
    --red:        #d9294b;
    --red-600:    #be123c;
    --red-50:     #fff1f3;
    --green:      #16a34a;
    --green-600:  #047857;
    --green-50:   #ecfdf3;

    /* The gradient: plum through red to orange. Hero words, CTA band, mark. */
    --brand-gradient: linear-gradient(120deg, var(--brand) 0%, var(--red) 55%, var(--accent) 100%);
    --brand-gradient-deep: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-600) 45%, #7a1f4f 75%, var(--accent-600) 100%);

    /* ---------------------------------------------------------------- ink */
    --ink:        #0b0f1a;
    --ink-body:   #545a6b;
    --ink-soft:   #5b606e;
    --ink-faint:  #6b6f7c;
    --ink-dim:    #9a9ca6;

    /* ---------------------------------------------------------------- surfaces */
    --surface:    #ffffff;
    --surface-2:  #fbfaf7;
    --surface-3:  #f4f2ec;
    --canvas:     #faf8f4;
    --line:       #e8e4dc;
    --line-soft:  #f1eee8;

    /* ---------------------------------------------------------------- semantic
     * Green means it happened (or is included), red means it did not, amber
     * means somebody is waiting. These never decorate.
     */
    --ok:      #16a34a;
    --ok-deep: #15803d;
    --warn:    #b45309;
    --danger:  #be123c;

    /* ---------------------------------------------------------------- type */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

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

    --shadow-xs: 0 1px 2px rgba(11, 15, 26, .04);
    --shadow-sm: 0 1px 2px rgba(11, 15, 26, .04), 0 2px 10px rgba(11, 15, 26, .04);
    --shadow:    0 1px 2px rgba(11, 15, 26, .04), 0 8px 24px -8px rgba(11, 15, 26, .12);
    --shadow-md: 0 2px 4px rgba(11, 15, 26, .05), 0 14px 34px -14px rgba(11, 15, 26, .22);
    --shadow-lg: 0 4px 8px rgba(11, 15, 26, .05), 0 30px 64px -24px rgba(11, 15, 26, .3);
    --shadow-brand: 0 10px 30px -12px rgba(var(--brand-rgb), .55);

    /* ---------------------------------------------------------------- module accents
     * One hue per module group, none of them blue, each dark enough to pass
     * 4.5:1 on its own tint because they colour text and glyphs.
     */
    --acc-clinical:    #be123c;  --acc-clinical-soft:    #fff1f3;  /* heart, clinical care */
    --acc-inpatient:   #602874;  --acc-inpatient-soft:   #f8f1fb;  /* wards - the brand */
    --acc-diagnostics: #c2410c;  --acc-diagnostics-soft: #fff4ed;  /* laboratory */
    --acc-pharmacy:    #047857;  --acc-pharmacy-soft:    #ecfdf3;  /* medicines */
    --acc-finance:     #b45309;  --acc-finance-soft:     #fffbeb;  /* money */
    --acc-people:      #a21caf;  --acc-people-soft:      #fdf4ff;  /* staff */
    --acc-operations:  #0f766e;  --acc-operations-soft:  #effcf9;  /* ambulance, feedback */

    /* Bootstrap, re-pointed at the brand so nothing falls back to its blue. */
    --bs-primary:            #602874;
    --bs-primary-rgb:        96, 40, 116;
    --bs-link-color:         #602874;
    --bs-link-color-rgb:     96, 40, 116;
    --bs-link-hover-color:   #4a1d58;
    --bs-link-hover-color-rgb: 74, 29, 88;
    --bs-focus-ring-color:   rgba(96, 40, 116, .25);
    --bs-body-color:         #0b0f1a;
    --bs-body-color-rgb:     11, 15, 26;
    --bs-secondary-color:    #545a6b;
    --bs-border-color:       #e8e4dc;
    --bs-primary-bg-subtle:  #f8f1fb;
    --bs-primary-border-subtle: #c9a6dc;
    --bs-primary-text-emphasis: #3d1749;
}

/*
 * A module's colour is set once on a wrapper and inherited by everything inside
 * it. The healthcare names are the ones to use; the older names are kept as
 * aliases so markup written against them keeps working.
 */
.mod-clinical,    .mod-ess        { --acc: var(--acc-clinical);    --acc-soft: var(--acc-clinical-soft); }
.mod-inpatient,   .mod-attendance { --acc: var(--acc-inpatient);   --acc-soft: var(--acc-inpatient-soft); }
.mod-diagnostics, .mod-leave      { --acc: var(--acc-diagnostics); --acc-soft: var(--acc-diagnostics-soft); }
.mod-pharmacy,    .mod-reports    { --acc: var(--acc-pharmacy);    --acc-soft: var(--acc-pharmacy-soft); }
.mod-finance,     .mod-payroll    { --acc: var(--acc-finance);     --acc-soft: var(--acc-finance-soft); }
.mod-people,      .mod-employee   { --acc: var(--acc-people);      --acc-soft: var(--acc-people-soft); }
.mod-operations                   { --acc: var(--acc-operations);  --acc-soft: var(--acc-operations-soft); }

/* --------------------------------------------------------------- the product site
 * Everything below applies only on the public site (body.marketing), and only
 * re-points Bootstrap pieces whose blue is compiled in rather than taken from
 * a variable.
 */
body.marketing {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}
body.marketing h1, body.marketing h2, body.marketing h3,
body.marketing .h1, body.marketing .h2, body.marketing .h3,
body.marketing .hero-title, body.marketing .navbar-brand span,
body.marketing .plan-name, body.marketing .plan-price {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

body.marketing .text-primary   { color: var(--brand) !important; }
body.marketing .bg-primary     { background-color: var(--brand) !important; }
body.marketing .border-primary { border-color: var(--brand) !important; }
body.marketing .link-primary   { color: var(--brand) !important; }

body.marketing .btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand-500);
    --bs-btn-disabled-border-color: var(--brand-500);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
body.marketing .btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-600);
    --bs-btn-active-border-color: var(--brand-600);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* The one warm call to action: orange, for "Book a demo" and trial buttons. */
body.marketing .btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-600);
    --bs-btn-border-color: var(--accent-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9a3412;
    --bs-btn-hover-border-color: #9a3412;
    --bs-btn-active-bg: #7c2d12;
    --bs-btn-active-border-color: #7c2d12;
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

body.marketing .form-control:focus,
body.marketing .form-select:focus,
body.marketing .form-check-input:focus {
    border-color: var(--brand-300);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .16);
}
body.marketing .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

body.marketing .accordion {
    --bs-accordion-active-color: var(--brand-700);
    --bs-accordion-active-bg: var(--brand-50);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .16);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23602874' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

body.marketing .nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
}

body.marketing ::selection { background: rgba(var(--brand-rgb), .18); }

/* --------------------------------------------------------------- DV SOFT logo */
.dv-logo {
    display: block;
    height: 34px;
    width: auto;
}
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}
.brand-lockup .brand-divider {
    width: 1px;
    height: 26px;
    background: var(--line);
}
.brand-lockup .brand-product {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.brand-lockup .brand-product small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-600);
}
/* On the dark footer the plum lettering needs a light ground to stay legible. */
.logo-chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem .7rem;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}
.logo-chip .dv-logo { height: 30px; }

/* marketing.css squares every header/footer image to 32px for an icon mark;
   the DV SOFT logo is a wordmark and keeps its own proportions. */
.site-header .navbar-brand img.dv-logo { width: auto; height: 34px; flex: 0 0 auto; border-radius: 0; }
.footer-brand .logo-chip img.dv-logo   { width: auto; height: 30px; flex: 0 0 auto; border-radius: 0; }