/* ============================================================
   Cloud Fill PDF — design tokens
   Palette drawn from the wordmark: sky blue / deep navy / warm
   orange, floated over a warm sky gradient. Calm, confident,
   a little playful — never clinical, never loud.
   ============================================================ */

:root {
    /* Brand */
    --cf-blue:        #2E9BD6;   /* "cloud" — primary action */
    --cf-blue-deep:   #1F7FB5;   /* hover / active */
    --cf-navy:        #1E2B50;   /* "fill" — headings, ink */
    --cf-orange:      #F6921E;   /* "pdf" — signature accent, used sparingly */
    --cf-orange-deep: #DD7E10;

    /* Sky scene */
    --cf-sky-top:     #BFE3F5;
    --cf-sky-mid:     #DDEEF7;
    --cf-sky-bottom:  #FDE9CF;
    --cf-cloud:       #FFFFFF;

    /* Neutrals */
    --cf-ink:         #2A3350;
    --cf-ink-soft:    #5A6580;
    --cf-ink-faint:   #8B95AD;
    --cf-line:        #E3E9F2;
    --cf-bg:          #F6FAFD;
    --cf-card:        #FFFFFF;

    /* Semantic */
    --cf-success:     #2E9E6B;
    --cf-danger:      #D64545;
    --cf-warning:     #E9A23B;

    /* Shape + depth */
    --cf-radius:      14px;
    --cf-radius-lg:   22px;
    --cf-shadow-card: 0 10px 40px rgba(30, 43, 80, 0.12);
    --cf-shadow-soft: 0 2px 10px rgba(30, 43, 80, 0.08);

    /* Type */
    --cf-font-display: "Baloo 2", "Trebuchet MS", sans-serif;
    --cf-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--cf-font-body);
    color: var(--cf-ink);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, .cf-display {
    font-family: var(--cf-font-display);
    color: var(--cf-navy);
    font-weight: 600;
    line-height: 1.2;
}

a { color: var(--cf-blue-deep); }

/* Visible keyboard focus everywhere — accessibility is a feature */
:focus-visible {
    outline: 3px solid var(--cf-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Buttons ── */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--cf-font-body);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}
.cf-btn:active { transform: translateY(1px); }
.cf-btn-primary { background: var(--cf-blue); color: #fff; }
.cf-btn-primary:hover { background: var(--cf-blue-deep); }
.cf-btn-secondary {
    background: #fff;
    color: var(--cf-navy);
    border: 1.5px solid var(--cf-line);
}
.cf-btn-secondary:hover { border-color: var(--cf-blue); color: var(--cf-blue-deep); }
.cf-btn-block { width: 100%; }
.cf-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Form fields ── */
.cf-field { margin-bottom: 18px; }
.cf-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cf-navy);
    margin-bottom: 6px;
}
.cf-input {
    width: 100%;
    font-family: var(--cf-font-body);
    font-size: 16px;
    color: var(--cf-ink);
    background: #fff;
    border: 1.5px solid var(--cf-line);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.15s ease;
}
.cf-input:focus {
    border-color: var(--cf-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 155, 214, 0.18);
}

/* ── Alerts ── */
.cf-alert {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14.5px;
    margin-bottom: 16px;
    display: none;
}
.cf-alert-error { background: #FDECEC; color: #9C2B2B; border: 1px solid #F5C9C9; }
.cf-alert-success { background: #E8F7EF; color: #1F6B47; border: 1px solid #BFE7D2; }