/* ==========================================================================
   CLOUD PUBLICATIONS — DESIGN TOKENS
   Single source of truth for colour, type, spacing, radii, shadows.
   ========================================================================== */

:root {
    /* Brand palette */
    --cp-primary:        #0F172A;
    --cp-secondary:      #2563EB;
    --cp-brand-mark:     #FB5C51;   /* logo coral */
    --cp-accent:         #FB923C;   /* light orange - fills, chips, highlights */
    --cp-accent-deep:    #EA580C;   /* deeper orange - solid fills */
    --cp-accent-text:    #C2410C;   /* orange that passes contrast on paper */
    --cp-background:     #F8FAFC;
    --cp-success:        #22C55E;
    --cp-text:           #1E293B;
    --cp-light-gray:     #F1F5F9;

    /* Extended neutrals */
    --cp-white:          #FFFFFF;
    --cp-muted:          #64748B;
    --cp-muted-soft:     #94A3B8;
    --cp-border:         #E2E8F0;
    --cp-border-strong:  #CBD5E1;
    --cp-slate-800:      #1E293B;
    --cp-slate-700:      #334155;

    /* Gradients */
    --cp-gradient:        linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
    --cp-gradient-warm:   linear-gradient(135deg, #FB923C 0%, #F97316 100%);
    --cp-gradient-deep:   linear-gradient(150deg, #0F172A 0%, #1E293B 55%, #172554 100%);
    --cp-gradient-subtle: linear-gradient(135deg, rgba(251, 146, 60, 0.14) 0%, rgba(249, 115, 22, 0.10) 100%);

    /* Typography */
    --cp-font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
    --cp-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

    /* Radii */
    --cp-radius-sm:  10px;
    --cp-radius-md:  16px;
    --cp-radius-lg:  22px;
    --cp-radius-xl:  30px;
    --cp-radius-pill: 999px;

    /* Shadows */
    --cp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --cp-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --cp-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.08);
    --cp-shadow-lg: 0 26px 60px rgba(15, 23, 42, 0.12);
    --cp-shadow-brand: 0 16px 34px rgba(37, 99, 235, 0.24);

    /* Layout */
    --cp-header-height: 82px;
    --cp-section-space: 7.5rem;
    --cp-transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}