/* ============================================================
   DevBoost Design System — Colors & Type
   Source: extracted from OUR_PROJECT_essentials (landing.css,
   my_campaigns.css, streamer_search.css, finances.css, etc.)
   ============================================================ */

/* Inter is loaded via Google Fonts in every page of the codebase:
   <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"> */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
    /* ---------- BRAND COLORS ---------- */
    --main-purple: #9C4DFF;        /* primary brand — buttons, focus, badges */
    --main-purple-soft: #B56FFF;   /* hover lift on primary */
    --main-purple-deep: #7A31D8;   /* bottom of submit-button gradient */
    --main-yellow: #FFC107;        /* accent — stats, hover swap, "public" badge */
    --landing-orange: #FF9900;     /* hero accent (landing only) */
    --hot-pink-1: #FF512F;         /* streamer card gradient start (orange-red) */
    --hot-pink-2: #DD2476;         /* streamer card gradient end (magenta) */

    /* ---------- SURFACES (DARK ONLY) ---------- */
    --bg-page:       #0D0D12;      /* app background */
    --bg-page-alt:   #121212;      /* landing page background */
    --bg-card:       #1A1A1A;      /* card / menu / modal default */
    --bg-card-2:     #1E1E1E;      /* streamer card */
    --bg-card-3:     #232323;      /* auth card */
    --bg-card-4:     #16161E;      /* create-campaign modal */
    --bg-input:      #000000;      /* search / dark inputs */
    --bg-elev:       #252525;      /* integration option, hover surfaces */
    --bg-footer:     #151515;      /* side-panel footer */

    /* glassmorphic chrome (header chips, balance, avatar) */
    --glass-fill:    rgba(255, 255, 255, 0.10);
    --glass-stroke:  rgba(255, 255, 255, 0.20);
    --glass-blur:    10px;

    /* ---------- TEXT ---------- */
    --fg-1: #FFFFFF;                     /* primary */
    --fg-2: rgba(255, 255, 255, 0.85);   /* secondary copy, auth-sub */
    --fg-3: rgba(255, 255, 255, 0.70);   /* form labels in modals */
    --fg-4: rgba(255, 255, 255, 0.60);   /* notification empty, hints */
    --fg-mute: #888888;                  /* card descriptions */
    --fg-input-border: #898989;          /* placeholder/disabled label */

    /* ---------- BORDERS / DIVIDERS ---------- */
    --border-1: rgba(255, 255, 255, 0.10);  /* card outline, divider */
    --border-2: rgba(255, 255, 255, 0.12);  /* input border */
    --border-3: rgba(255, 255, 255, 0.25);  /* secondary button border */
    --border-input-dark: #333333;
    --border-header: #FFFFFF;               /* header bottom rule */

    /* ---------- SEMANTIC ---------- */
    --success: #7BE39A;
    --success-bg: rgba(123, 227, 154, 0.12);
    --danger:  #FF6B6B;
    --danger-strong: #FF4444;
    --danger-soft: #FF8A8A;
    --danger-bg: rgba(255, 107, 107, 0.10);
    --warn:    var(--main-yellow);
    --link:    var(--main-purple);

    /* ---------- TINTS (used for emphasis panels) ---------- */
    --tint-purple-1: rgba(156, 77, 255, 0.06);
    --tint-purple-2: rgba(156, 77, 255, 0.10);
    --tint-purple-3: rgba(156, 77, 255, 0.18);
    --tint-purple-4: rgba(156, 77, 255, 0.25);

    /* ---------- GRADIENTS ---------- */
    --grad-primary:      linear-gradient(135deg, var(--main-purple), var(--main-purple-deep));
    --grad-hot:          linear-gradient(135deg, var(--hot-pink-1) 0%, var(--hot-pink-2) 100%);
    --grad-logo:         linear-gradient(90deg, #9455FF 0%, #FFCA4A 61%, #9455FF 100%);
    --grad-blob-purple:  radial-gradient(circle at 40% 40%, rgba(156, 77, 255, 0.45), transparent 62%);
    --grad-blob-orange:  radial-gradient(circle at 60% 50%, rgba(255, 153, 0, 0.35), transparent 60%);

    /* ---------- ELEVATION ---------- */
    --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.30);                 /* streamer card resting */
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.40);                 /* streamer card hover */
    --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.50);                /* dropdowns */
    --shadow-xl:  0 20px 80px rgba(0, 0, 0, 0.60);                /* modal */
    --shadow-auth: 0 24px 48px rgba(0, 0, 0, 0.45);               /* auth card */
    --shadow-purple-glow:    0 4px 20px rgba(156, 77, 255, 0.40); /* primary hover halo */
    --shadow-purple-press:   0 8px 22px rgba(156, 77, 255, 0.28); /* submit button resting */
    --shadow-focus-ring:     0 0 0 3px rgba(156, 77, 255, 0.22);

    /* ---------- RADII ---------- */
    --r-xs: 4px;     /* badges, small chips */
    --r-sm: 6px;     /* filter tabs, small buttons */
    --r-md: 8px;     /* inputs, primary buttons */
    --r-lg: 10px;    /* role selector, panels */
    --r-xl: 12px;    /* cards, dropdown menus */
    --r-2xl: 16px;   /* modals, auth card */
    --r-pill: 24px;  /* glass header chips */
    --r-round: 9999px;

    /* ---------- SPACING SCALE (4-pt) ---------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 28px;
    --s-8: 32px;
    --s-10: 40px;

    /* ---------- LAYOUT ---------- */
    --maxw-app: 1400px;       /* dashboards */
    --maxw-landing: 1440px;
    --maxw-modal: 560px;
    --maxw-auth: 520px;
    --page-pad: 20px;

    /* ---------- MOTION ---------- */
    --t-fast: 0.18s ease;
    --t-base: 0.30s ease;
    --t-press: 0.08s ease;

    /* ---------- TYPE ---------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* SEMANTIC TYPE TOKENS (verified against codebase) */
    --type-display-size: 46px;   /* hero-title on desktop */
    --type-display-weight: 800;
    --type-display-lh: 1.12;

    --type-hero-size: 34px;      /* hero-title default */
    --type-hero-weight: 800;
    --type-hero-lh: 1.12;

    --type-h1-size: 28px;        /* page titles ("Кампании") */
    --type-h1-weight: 700;

    --type-h2-size: 22px;        /* modal heads, campaign-card titles */
    --type-h2-weight: 700;

    --type-h3-size: 19px;        /* auth heading */
    --type-h3-weight: 700;

    --type-h4-size: 16px;        /* filter group title */
    --type-h4-weight: 700;

    --type-body-size: 15px;      /* auth inputs, primary CTAs */
    --type-body-weight: 400;
    --type-body-lh: 1.45;

    --type-body-sm-size: 14px;   /* most UI copy */
    --type-body-sm-weight: 400;
    --type-body-sm-lh: 1.5;

    --type-caption-size: 13px;   /* card description, labels */
    --type-caption-weight: 400;

    --type-micro-size: 12px;     /* badges, hints */
    --type-micro-weight: 500;

    --type-eyebrow-size: 11px;   /* metric labels, banner badge */
    --type-eyebrow-weight: 600;

    /* ---------- COMPONENT TOKENS ---------- */
    --btn-h: 44px;
    --btn-pad-x: 24px;
    --btn-radius: var(--r-md);

    --input-h: 44px;
    --input-pad-x: 14px;
    --input-radius: var(--r-md);

    --avatar-sm: 36px;
    --avatar-md: 44px;
    --avatar-lg: 60px;

    --header-rule: 1px solid var(--border-header);
}

/* ============================================================
   Base type styles — apply to plain HTML elements so the
   semantic vars above can be used directly.
   ============================================================ */

html, body {
    font-family: var(--font-sans);
    color: var(--fg-1);
    background-color: var(--bg-page);
    line-height: 1.6;
    font-size: var(--type-body-sm-size);
}

h1 {
    font-size: var(--type-h1-size);
    font-weight: var(--type-h1-weight);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: 1.25;
}

h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--type-h3-weight);
    line-height: 1.3;
}

h4 {
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
    line-height: 1.35;
}

p {
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-lh);
    color: var(--fg-2);
}

small,
.caption {
    font-size: var(--type-caption-size);
    color: var(--fg-3);
}

.eyebrow {
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-3);
}

/* Hero display helper (landing only) */
.display {
    font-size: var(--type-display-size);
    font-weight: var(--type-display-weight);
    line-height: var(--type-display-lh);
}
.display .accent { color: var(--landing-orange); }

/* Brand-gradient text (matches the logo's color treatment) */
.brand-gradient-text {
    background: var(--grad-logo);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}