/* CapeMart.Suite's own landing page ("/") stylesheet — deliberately self-contained, not shared
   with or derived from Module.Common's staff-admin css (variables.css/components.css/buttons.css/
   shell.css) even though Suite references that module for its actual admin screens (Catalog,
   Inventory, POS, Support, etc. all correctly reuse Module.Common's shared layout — that sharing
   is the point of the module architecture). This one page — the public "/" landing page a visitor
   sees before signing in — uses its own class names, own colors, own logo/favicon, own file. */
:root {
    --suite-primary: #2563eb;
    --suite-primary-dark: #1d4ed8;
    --suite-text: #1e293b;
    --suite-text-muted: #64748b;
    --suite-border: #e2e8f0;
    --suite-bg: #f8fafc;
    --suite-radius: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--suite-bg);
    color: var(--suite-text);
}

.suite-overlay {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.suite-dialog {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--suite-border);
    border-radius: var(--suite-radius);
    padding: 32px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.suite-header {
    text-align: center;
    margin-bottom: 32px;
}

.suite-logo {
    height: 64px;
    width: 64px;
    margin-bottom: 16px;
}

.suite-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--suite-text);
}

.suite-header p {
    font-size: 14px;
    color: var(--suite-text-muted);
    margin: 0;
}

.suite-btn {
    display: block;
    width: 85%;
    margin: 0 auto;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
}

.suite-btn-primary {
    background: var(--suite-primary);
    color: #fff;
}

.suite-btn-primary:hover {
    background: var(--suite-primary-dark);
}

.suite-btn-secondary {
    background: #fff;
    color: var(--suite-text);
    border: 1px solid var(--suite-border);
}

.suite-btn-secondary:hover {
    background: var(--suite-bg);
}