/*
 * Dataplatr Design Tokens
 * -----------------------
 * Single source of truth for brand colors, typography scale, spacing, and
 * shadow values. All component and page CSS should reference these variables
 * instead of hardcoding raw values.
 *
 * Usage:  color: var(--clr-primary);
 *         border-radius: var(--radius-card);
 */

:root {

    /* ── Brand Colors ─────────────────────────────────────────────────── */
    --clr-primary:        #1C5FFD;   /* main blue — buttons, links, accents */
    --clr-primary-dark:   #113997;   /* darker blue — gradients, hover states */
    --clr-secondary:      #FF6C0A;   /* orange — CTA highlights, icon backgrounds */
    --clr-dark:           #001649;   /* near-black navy — dark section backgrounds */
    --clr-white:          #FFFFFF;
    --clr-text-muted:     #A3A3A3;   /* secondary body text */
    --clr-text-subtle:    #A7A7A7;   /* tertiary / placeholder text */
    --clr-bg-light:       #F9FAFE;   /* light section backgrounds */

    /* ── Typography Scale ─────────────────────────────────────────────── */
    --fs-xs:   13px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-md:   18px;
    --fs-lg:   20px;
    --fs-xl:   24px;
    --fs-2xl:  32px;
    --fs-3xl:  48px;
    --fs-4xl:  64px;

    /* ── Spacing ──────────────────────────────────────────────────────── */
    --space-xs:      8px;
    --space-sm:      16px;
    --space-md:      24px;
    --space-lg:      32px;
    --space-xl:      48px;
    --space-2xl:     64px;
    --space-section: 80px 0;        /* standard section vertical padding */

    /* ── Border Radius ────────────────────────────────────────────────── */
    --radius-sm:    8px;
    --radius-card:  16px;
    --radius-large: 32px;

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-sm:   0px 0px 4px rgba(0, 0, 0, 0.25);
    --shadow-card: 0px 0px 36px rgba(88, 88, 88, 0.67);

    /* ── Gradients ────────────────────────────────────────────────────── */
    --gradient-primary: linear-gradient(226deg, var(--clr-primary) 31%, var(--clr-primary-dark) 100%);
    --gradient-dark:    linear-gradient(148deg, #000 26%, var(--clr-primary) 85%);
}