/* ==========================================================================
   Paynex — base tokens shared by dashboard + auth
   Palette: white surfaces, soft lavender canvas and purple primary
   ========================================================================== */
:root {
    /* brand */
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-deep: #5b21b6;
    --primary-bright: #c4b5fd;
    --accent: #db2777;
    --accent-soft: #fce7f3;

    /* text */
    --heading: #241b42;
    --ink: #403951;
    --muted: #716b86;
    --muted-2: #777086;

    /* surfaces */
    --line: #e9e5f2;
    --line-soft: #f1edf7;
    --bg: #f7f6fc;
    --card: #ffffff;
    --card-2: #faf9fd;
    --field: #ffffff;
    --nav: #35176b;

    /* status */
    --green: #15803d;
    --amber: #a16207;
    --danger: #b91c1c;

    --radius: 14px;
    --shadow-sm: 0 1px 3px rgba(46, 28, 80, .04);
    --shadow: 0 6px 20px rgba(46, 28, 80, .07);
    --shadow-lg: 0 20px 50px rgba(46, 28, 80, .12);
    --sidebar-w: 258px;
}

/* Native form controls and dropdowns use the light palette. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; padding: 0; color: inherit; background: none; }
input { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ---------- brand lockup (fallback when logo.png is absent) ---------- */
.brand-img { width: auto; object-fit: contain; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.brand__mark {
    width: var(--brand-h);
    height: var(--brand-h);
    flex: 0 0 auto;
    display: block;
}

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
    font-weight: 800;
    font-size: calc(var(--brand-h) * .52);
    letter-spacing: -.5px;
    color: var(--heading);
}

.brand__name-alt { color: var(--accent); }

.brand__tag {
    margin-top: 3px;
    font-size: calc(var(--brand-h) * .17);
    font-weight: 600;
    letter-spacing: .09em;
    color: var(--muted-2);
}

.brand--dark .brand__name { color: #fff; }
.brand--dark .brand__tag { color: rgba(255, 255, 255, .62); }

.art-img, .art-svg { display: block; width: 100%; height: 100%; }
.art-svg { line-height: 0; }

/* ---------- generic pieces ---------- */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}

.card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
}

.link-more {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.link-more:hover { text-decoration: underline; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.btn:active { transform: translateY(1px); }
.btn :is(svg, .ui-image) { width: 15px; height: 15px; flex: 0 0 auto; }

.btn--primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .26);
}

.btn--primary:hover { box-shadow: 0 8px 22px rgba(124, 58, 237, .38); }

.btn--ghost {
    background: rgba(255, 255, 255, .04);
    color: var(--primary);
    border: 1px solid var(--line);
}

.btn--ghost:hover { background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .45); }

.btn--block { width: 100%; }

/* tinted icon tiles — slot names are cosmetic, not literal hues */
.tint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.tint :is(svg, .ui-image) { width: 55%; height: 55%; }
.tint .tile-img { width: 84%; height: 84%; object-fit: contain; }

.tint--blue    { background: rgba(59, 130, 246, .16);  color: #7cb3ff; }
.tint--purple  { background: rgba(139, 92, 246, .16);  color: #b79bff; }
.tint--amber   { background: rgba(245, 158, 11, .16);  color: #a16207; }
.tint--green   { background: rgba(124, 58, 237, .16);  color: #15803d; }
.tint--red     { background: rgba(248, 113, 113, .16); color: #b91c1c; }
.tint--cyan    { background: rgba(34, 211, 238, .16);  color: #4fdcf0; }
.tint--teal    { background: rgba(20, 184, 166, .16);  color: #4cd3c2; }
.tint--indigo  { background: rgba(99, 102, 241, .16);  color: #9ea1ff; }
.tint--sky     { background: rgba(14, 165, 233, .16);  color: #5fc0f5; }
.tint--pink    { background: rgba(236, 72, 153, .16);  color: #f89ac6; }
.tint--slate   { background: rgba(148, 163, 184, .14); color: #b3c4d6; }

/* native dropdown list items — Windows/Chrome ignore inherited colours here */
select option,
select optgroup {
    background: var(--card);
    color: var(--ink);
}

/* Shared service artwork: natural colour, transparent backgrounds and crisp sizing. */
.ui-image { display: inline-block; width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.rail__ico img.ui-image { width: 29px; height: 29px; }
.tint img.ui-image { width: 80%; height: 80%; }
.ad-rail__item img.ui-image { width: 25px; height: 25px; }
.svc-hero__icon img.ui-image { width: 38px; height: 38px; }
.svc-hero__icon--sm img.ui-image { width: 26px; height: 26px; }
.lp-service__ico img.ui-image { width: 38px; height: 38px; }

/* Status colours remain distinct from the purple brand colour on white cards. */
.tint--blue { background: #eff6ff; color: #2563eb; }
.tint--purple { background: #f3e8ff; color: #7c3aed; }
.tint--amber { background: #fffbeb; color: #a16207; }
.tint--green { background: #ecfdf5; color: #15803d; }
.tint--red { background: #fef2f2; color: #b91c1c; }
.tint--cyan { background: #ecfeff; color: #0e7490; }
.tint--teal { background: #f0fdfa; color: #0f766e; }
.tint--indigo { background: #eef2ff; color: #4f46e5; }
.tint--sky { background: #f0f9ff; color: #0369a1; }
.tint--pink { background: #fdf2f8; color: #be185d; }
.tint--slate { background: #f1f5f9; color: #475569; }
:where(input, textarea, select)::placeholder { color: var(--muted-2); opacity: 1; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }