/* ============================================================
   ALARTA — Incarta Design System
   Canonical design tokens (--ic-*) + login-screen styles
   ============================================================ */

:root {
    /* ── Primary (teal) ─────────────────────────────────── */
    --ic-primary:                  #0891b2;
    --ic-primary-dim:              #0a7e9b;
    --ic-on-primary:               #ffffff;
    --ic-primary-container:        #e3f3f7;
    --ic-on-primary-container:     #0891b2;
    --ic-primary-fixed-dim:        #bfe3ec;

    /* ── Deep teal (sidebar / hero surfaces) ────────────── */
    --ic-teal-deep:                #0b3540;
    --ic-teal-deeper:              #072731;

    /* ── Secondary ──────────────────────────────────────── */
    --ic-secondary:                #51666e;
    --ic-secondary-dim:            #3d4f57;
    --ic-on-secondary:             #ffffff;
    --ic-secondary-container:      #e3f3f7;
    --ic-on-secondary-container:   #0891b2;

    /* ── Warn (amber) ───────────────────────────────────── */
    --ic-warn:                     #a96a1c;
    --ic-warn-container:           #f8f0e2;

    /* ── Error ──────────────────────────────────────────── */
    --ic-error:                    #b3403a;
    --ic-on-error:                 #ffffff;
    --ic-error-container:          #f9ecea;
    --ic-on-error-container:       #b3403a;

    /* ── OK (green) ─────────────────────────────────────── */
    --ic-ok:                       #1e7f63;
    --ic-ok-container:             #e6f3ee;

    /* ── Surface hierarchy ──────────────────────────────── */
    --ic-surface:                  #faf8f4;
    --ic-surface-lowest:           #ffffff;
    --ic-surface-low:              #f3f1ec;
    --ic-surface-mid:              #edeae3;
    --ic-surface-high:             #e6e3dc;
    --ic-surface-highest:          #dcd8cf;
    --ic-surface-dim:              #c7c2b8;

    /* ── On-surface ─────────────────────────────────────── */
    --ic-on-surface:               #15262c;
    --ic-on-surface-variant:       #51666e;

    /* ── Outline ────────────────────────────────────────── */
    --ic-outline:                  #8aa0a7;
    --ic-outline-variant:          #e6e3dc;

    /* ── Typography ─────────────────────────────────────── */
    --ic-font-display:             'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
    --ic-font-body:                'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
    --ic-font-mono:                'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

    /* ── Border radius ──────────────────────────────────── */
    --ic-r-sm:                     0.625rem;
    --ic-r-md:                     0.875rem;
    --ic-r-lg:                     1.25rem;
    --ic-r-full:                   9999px;

    /* ── Depth ──────────────────────────────────────────── */
    --ic-shadow-card:  0 1px 2px rgba(21, 38, 44, 0.04), 0 8px 24px -12px rgba(21, 38, 44, 0.10);
    --ic-shadow-float: 0 2px 6px rgba(7, 39, 49, 0.18), 0 24px 60px -20px rgba(7, 39, 49, 0.45);

    /* ── Motion ─────────────────────────────────────────── */
    --ic-motion-quick:             0.15s ease;
    --ic-motion-default:           0.2s ease;
    --ic-motion-slow:              0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--ic-font-body);
    color: var(--ic-on-surface);
    font-size: 15px;
    line-height: 1.5;
}

::selection { background: var(--ic-primary-container); }

/* ---------- buttons ---------- */
.btn {
    font-family: var(--ic-font-body);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--ic-r-full);
    padding: 11px 24px;
    cursor: pointer;
    transition: background var(--ic-motion-quick), transform 0.12s ease, box-shadow var(--ic-motion-quick);
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--ic-primary); outline-offset: 2px; }

.btn-primary { background: var(--ic-primary); color: var(--ic-on-primary); }
.btn-primary:hover { background: var(--ic-primary-dim); }

/* ---------- brand mark ---------- */
.mark {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ic-r-md);
    background: var(--ic-primary-container);
}
.mark img { display: block; width: 60%; height: 60%; object-fit: contain; }

/* ---------- login page layout ---------- */
body.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1100px 700px at 78% -10%, rgba(8, 145, 178, .28), transparent 60%),
        radial-gradient(900px 600px at 8% 110%, rgba(8, 145, 178, .14), transparent 55%),
        linear-gradient(165deg, var(--ic-teal-deep) 0%, var(--ic-teal-deeper) 100%);
    padding: 32px 20px;
}

.login-rings {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .35;
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--ic-surface);
    border-radius: 28px;
    box-shadow: var(--ic-shadow-float);
    padding: 56px 44px 44px;
    text-align: center;
    animation: login-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.login-card .mark {
    width: 56px;
    height: 56px;
    border-radius: var(--ic-r-lg);
    margin: 0 auto 18px;
}

.login-wordmark {
    font-family: var(--ic-font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-on-surface);
}
.login-wordmark span { color: var(--ic-primary); }

.login-byline {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ic-outline);
    letter-spacing: .04em;
}

.login-card h1 {
    margin: 36px 0 20px;
    font-family: var(--ic-font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.login-error {
    margin: -8px 0 20px;
    padding: 10px 14px;
    background: var(--ic-error-container);
    color: var(--ic-error);
    border-radius: var(--ic-r-sm);
    font-size: 13px;
    text-align: center;
}

.login-field { text-align: left; }
.login-field + .login-field { margin-top: 16px; }
.login-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ic-on-surface-variant);
    margin-bottom: 7px;
}
.login-field input {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--ic-on-surface);
    background: var(--ic-surface-lowest);
    border: 1px solid var(--ic-outline-variant);
    border-radius: var(--ic-r-md);
    padding: 13px 16px;
    transition: border-color var(--ic-motion-quick), box-shadow var(--ic-motion-quick);
}
.login-field input::placeholder { color: var(--ic-outline); }
.login-field input:focus {
    outline: none;
    border-color: var(--ic-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .15);
}
.login-field input.code-input {
    text-align: center;
    letter-spacing: .35em;
    font-size: 18px;
}

.login-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.login-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ic-primary);
}
.login-checkbox-row label {
    font-size: 13px;
    color: var(--ic-on-surface-variant);
}

.login-card .btn { width: 100%; margin-top: 22px; padding: 13px 24px; }

.login-help {
    margin-top: 26px;
    font-size: 13px;
    color: var(--ic-on-surface-variant);
}
.login-help a { color: var(--ic-primary); text-decoration: none; font-weight: 500; }
.login-help a:hover { text-decoration: underline; }

.login-foot {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(250, 248, 244, .45);
    letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}