/* ============================================================================
   SutriSoft brand tokens — the single source of truth.
   ============================================================================
   Loaded by BOTH the marketing site (site.css imports it) and the application
   shell (app.blade.php links it), so the landing page, the login screen, the
   dashboard and the email template cannot drift apart again.

   Change a value here and it changes everywhere. Do not redefine brand colours,
   fonts or the logo lockup anywhere else.

   The email template (resources/views/mail/message.blade.php) mirrors these
   values as literals, because email clients cannot use CSS custom properties.
   If you change a colour here, update that file's @php block to match.
   ============================================================================ */

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

:root {
  /* ---- palette ---- */
  --brand-ink: #0b1220;
  --brand-ink-2: #111a2e;
  --brand-body: #48506a;
  --brand-muted: #6b7391;
  --brand-line: #e9ebf2;
  --brand-line-2: #f1f2f7;
  --brand-bg: #ffffff;
  --brand-bg-soft: #f8f9fc;
  --brand-accent: #4f46e5;
  --brand-accent-2: #6d5efc;
  --brand-accent-soft: #eef0fe;
  --brand-ok: #0f9d6b;
  --brand-warn: #f5a524;

  /* ---- type ---- */
  --brand-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- logo lockup geometry ---- */
  --brand-logo-size: 38px;
  --brand-logo-radius: 10px;
  --brand-logo-glow: 0 8px 18px -6px rgba(79, 70, 229, .55);
}

/* ============================================================================
   The logo lockup — styles the markup the site already uses:

     <a href="/" class="brand">
       <span class="logo">S</span>
       <span>SutriSoft<span class="tm">&trade;</span><small>by Sutrixs Global</small></span>
     </a>

   Add .brand--on-dark when it sits on a dark background or photograph.
   ============================================================================ */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--brand-font-display);
  font-weight: 800;
  font-size: 1.28rem;
  color: var(--brand-ink);
  text-decoration: none;
}

/* The mark: a rounded gradient tile with the letter S. */
.brand .logo {
  width: var(--brand-logo-size);
  height: var(--brand-logo-size);
  border-radius: var(--brand-logo-radius);
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-2));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: var(--brand-logo-glow);
  flex-shrink: 0;
}

.brand .tm {
  font-size: .62rem;
  vertical-align: super;
  font-weight: 700;
  color: var(--brand-muted);
}

.brand small {
  display: block;
  font-family: var(--brand-font-body);
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--brand-muted);
  text-transform: uppercase;
  margin-top: -2px;
}

/* On a dark background or photograph. */
.brand--on-dark { color: #fff; }
.brand--on-dark .tm { color: rgba(255, 255, 255, .6); }
.brand--on-dark small { color: rgba(255, 255, 255, .5); }