/* ==========================================================================
   Signveo design system
   Outfit typeface, a confident light-blue primary on a calm slate neutral set.
   Hand-built so the product reads as designed, not assembled.
   ========================================================================== */

:root {
    /* Brand blue */
    --brand-50:  #eef4ff;
    --brand-100: #dde8ff;
    --brand-200: #c2d6ff;
    --brand-300: #9bbaff;
    --brand-400: #6f95fb;
    --brand-500: #4b73f3;
    --brand-600: #2f58e6;  /* primary */
    --brand-700: #2545c4;
    --brand-800: #22399c;
    --brand-900: #21357c;

    /* Slate neutrals */
    --ink:       #0f1729;  /* headings */
    --body:      #44506a;  /* body text */
    --muted:     #7a879f;  /* secondary */
    --line:      #e4e9f2;  /* borders */
    --line-soft: #eef1f7;
    --surface:   #ffffff;
    --canvas:    #f6f8fc;  /* page background */
    --canvas-2:  #eef2f9;

    /* Status */
    --ok:     #15a05a;
    --ok-bg:  #e6f6ee;
    --warn:   #b7791f;
    --warn-bg:#fcf2e0;
    --danger: #d83a3a;
    --danger-bg:#fbe9e9;

    --shadow-sm: 0 1px 2px rgba(16,23,41,.06), 0 1px 3px rgba(16,23,41,.05);
    --shadow-md: 0 4px 10px rgba(16,23,41,.06), 0 12px 28px rgba(16,23,41,.07);
    --shadow-lg: 0 18px 50px rgba(33,53,124,.14);

    --r-sm: 9px;
    --r:    13px;
    --r-lg: 20px;
    --r-xl: 28px;

    --maxw: 1120px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--body);
    background: var(--canvas);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.14; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.28rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }
small { font-size: .82rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brand-700); background: var(--brand-50);
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--brand-100);
}
.lede { font-size: 1.2rem; color: var(--body); max-width: 60ch; }
.muted { color: var(--muted); }

/* ---- buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: .98rem; font-weight: 600; line-height: 1;
    padding: 14px 24px; border-radius: var(--r); border: 1px solid transparent;
    cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s;
    white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 20px rgba(47,88,230,.28);
}
.btn-primary:hover { color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 26px rgba(47,88,230,.36); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--ink); border-color: var(--brand-200); background: var(--brand-50); }
.btn-quiet { background: transparent; color: var(--body); padding: 12px 16px; }
.btn-quiet:hover { color: var(--ink); background: var(--canvas-2); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-sm { padding: 9px 15px; font-size: .86rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

/* ---- cards & surfaces ---- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 28px; }

/* ---- forms ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; color: var(--ink); font-size: .9rem; margin-bottom: 7px; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.input, .select, textarea.input {
    width: 100%; font-family: inherit; font-size: .98rem; color: var(--ink);
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; transition: border-color .15s, box-shadow .15s; outline: none;
}
.input:focus, .select:focus, textarea.input:focus {
    border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-50);
}
.input::placeholder { color: #aab4c6; }

/* ---- badges ---- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    border: 1px solid transparent; letter-spacing: .01em;
}
.badge::before { content:''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; }
.badge-ok    { color: var(--ok); background: var(--ok-bg); }
.badge-draft { color: var(--muted); background: var(--canvas-2); }
.badge-sent  { color: var(--brand-700); background: var(--brand-50); }
.badge-warn  { color: var(--warn); background: var(--warn-bg); }
.badge-danger{ color: var(--danger); background: var(--danger-bg); }

/* ---- alerts ---- */
.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: .92rem; margin-bottom: 18px; border: 1px solid; }
.alert-ok     { color: #0d7a43; background: var(--ok-bg); border-color: #bfe6cf; }
.alert-danger { color: #a92a2a; background: var(--danger-bg); border-color: #f1c9c9; }
.alert-info   { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-100); }

/* ---- table ---- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 0 16px 12px; }
.table td { padding: 16px; border-top: 1px solid var(--line-soft); font-size: .95rem; color: var(--body); vertical-align: middle; }
.table tr:hover td { background: var(--canvas); }

/* ---- utilities ---- */
.row { display: flex; } .col { display: flex; flex-direction: column; }
.ac { align-items: center; } .jb { justify-content: space-between; } .jc { justify-content: center; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.center { text-align: center; } .wrap-flex { flex-wrap: wrap; }
.grow { flex: 1; }
.hide-sm { }
@media (max-width: 720px){ .hide-sm { display:none !important; } .row-sm-col { flex-direction: column; } }