﻿@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Tool Spire design tokens (Phase 1)
   ========================================================================== */
:root {
    --ts-navy: #0f1729;
    --ts-navy-mid: #1a2847;
    --ts-navy-light: #243352;
    --ts-maroon: #8b2e2e;
    --ts-maroon-hover: #732626;
    --ts-maroon-active: #5c1e1e;
    --ts-bg-page: #f4f5f7;
    --ts-card-bg: #ffffff;
    --ts-card-radius: 12px;
    --ts-card-shadow: 0 4px 16px rgba(15, 23, 41, 0.08);
    --ts-border: #e2e6ed;
    --ts-text: #303030;
    --ts-text-muted: #555960;
    --ts-font: 'Plus Jakarta Sans', sans-serif;
    --ts-header-height: 3.5rem;
    --ts-header-dark: #0b0e14;
    --ts-promo-bg: #131131;
    --ts-login-primary: #5145e5;
    --ts-login-primary-hover: #4338ca;
    --ts-login-primary-active: #3730a3;
    --ts-text-heading: #0f1729;
    --ts-text-subtle: #6b7280;
}

/* ==========================================================================
   Global shell (Phase 1)
   ========================================================================== */
.ts-theme {
    background-color: var(--ts-bg-page);
    color: var(--ts-text);
    font-family: var(--ts-font);
}

.ts-theme .page-wrapper {
    background: var(--ts-bg-page);
    min-height: calc(100vh - var(--ts-header-height));
}

.ts-header {
    background: var(--ts-navy) !important;
    border-bottom: 1px solid var(--ts-navy-light);
    box-shadow: var(--ts-card-shadow);
}

.ts-header .navbar-brand,
.ts-header .nav-link,
.ts-header .navbar-nav .nav-link-title {
    color: rgba(255, 255, 255, 0.92);
}

.ts-header .nav-link:hover,
.ts-header .nav-link:focus {
    color: #fff;
}

.ts-header-nav {
    background: var(--ts-navy-mid);
}

.ts-header-nav .navbar {
    background: var(--ts-navy-mid) !important;
}

.ts-header--guest {
    padding: 0.75rem 0;
}

.ts-header--guest .navbar-brand {
    margin: 0 auto;
}

.ts-footer {
    background-color: var(--ts-card-bg);
    border-top: 1px solid var(--ts-border);
}

.ts-theme .page-body {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.ts-theme .row-cards > .am-widget,
.ts-theme .card,
.ts-theme .am-auth-form:not(.ts-login-form),
.ts-theme .am-block-nodata {
    background: var(--ts-card-bg);
    border-radius: var(--ts-card-radius);
    box-shadow: var(--ts-card-shadow);
}

/* Primary buttons (signup/dashboard — not login) */
.btn-ts-primary,
body.ts-theme:not(.ts-login-page):not(.ts-signup-page) input[type="submit"],
body.ts-theme:not(.ts-login-page):not(.ts-signup-page) .am-form input[type="submit"],
.am-auth-form:not(.ts-login-form) .am-row.am-row-buttons .am-element input[type="submit"] {
    background-color: var(--ts-maroon) !important;
    border-color: var(--ts-maroon) !important;
    color: #fff !important;
}

.btn-ts-primary:hover,
body.ts-theme:not(.ts-login-page):not(.ts-signup-page) input[type="submit"]:hover,
.am-auth-form:not(.ts-login-form) .am-row.am-row-buttons .am-element input[type="submit"]:hover {
    background-color: var(--ts-maroon-hover) !important;
    border-color: var(--ts-maroon-hover) !important;
}

.btn-ts-primary:active {
    background-color: var(--ts-maroon-active) !important;
    border-color: var(--ts-maroon-active) !important;
}


