/*
 * VIPelanlar — Design Tokens
 * ---------------------------------------------------------------
 * Single source of truth for the visual language. No hex values,
 * pixel spacing or font sizes should be written directly in
 * component/page CSS — reference a token instead.
 *
 * Brand direction: a deep, confident teal (trust, legibility on a
 * marketplace of listings) paired with a restrained gold accent
 * reserved for VIP/promoted signalling — a deliberate nod to the
 * "VIP" in VIPelanlar without turning the whole UI gold.
 */

:root {
    /* ---- Brand -------------------------------------------------- */
    --vip-color-primary: #0E6B5C;
    --vip-color-primary-hover: #0A5548;
    --vip-color-primary-active: #084640;
    --vip-color-primary-soft: #E4F2EF;
    --vip-color-primary-soft-strong: #CDE8E2;

    --vip-color-accent: #B8842C;
    --vip-color-accent-soft: #FBF2E2;

    /* ---- Neutrals ------------------------------------------------ */
    --vip-color-bg: #F6F7F6;
    --vip-color-surface: #FFFFFF;
    --vip-color-surface-secondary: #F0F2F1;
    --vip-color-border: #E1E4E2;
    --vip-color-border-strong: #C7CCC9;
    --vip-color-overlay: rgba(15, 23, 20, .5);

    /* ---- Text ------------------------------------------------------ */
    --vip-color-text: #17211D;
    --vip-color-text-muted: #57635D;
    --vip-color-text-light: #8B958F;
    --vip-color-text-on-primary: #FFFFFF;
    --vip-color-text-on-accent: #2B1D06;
    --vip-color-link: var(--vip-color-primary);

    /* ---- Status ---------------------------------------------------- */
    --vip-color-success: #1E8A5B;
    --vip-color-success-soft: #E4F5EC;
    --vip-color-warning: #B4790A;
    --vip-color-warning-soft: #FBF0DC;
    --vip-color-danger: #C4433F;
    --vip-color-danger-soft: #FAE7E6;
    --vip-color-focus: #1477C9;

    /* ---- Shadow ------------------------------------------------------ */
    --vip-shadow-xs: 0 1px 2px rgba(17, 27, 23, .06);
    --vip-shadow-sm: 0 2px 6px rgba(17, 27, 23, .07);
    --vip-shadow-md: 0 8px 20px rgba(17, 27, 23, .10);
    --vip-shadow-lg: 0 20px 44px rgba(17, 27, 23, .16);

    /* ---- Radius ------------------------------------------------------ */
    --vip-radius-sm: 8px;
    /* inputs, buttons, chips */
    --vip-radius-md: 12px;
    /* cards */
    --vip-radius-lg: 18px;
    /* dialogs, drawers, large panels */
    --vip-radius-full: 999px;
    /* pills, avatars, badges */

    /* ---- Spacing scale (4px base) ------------------------------------ */
    --vip-space-3xs: 4px;
    --vip-space-2xs: 8px;
    --vip-space-xs: 12px;
    --vip-space-sm: 16px;
    --vip-space-md: 24px;
    --vip-space-lg: 32px;
    --vip-space-xl: 48px;
    --vip-space-2xl: 64px;

    /* ---- Layout ------------------------------------------------------- */
    --vip-container-max: 1240px;
    --vip-container-gutter: 20px;
    --vip-header-height: 64px;
    --vip-header-height-mobile: 56px;
    --vip-mobile-nav-height: 60px;

    /* ---- Typography ----------------------------------------------------- */
    --vip-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --vip-text-xs: .75rem;
    /* 12px — metadata, timestamps */
    --vip-text-sm: .8125rem;
    /* 13px — small labels, chips */
    --vip-text-base: .9375rem;
    /* 15px — body copy */
    --vip-text-md: 1rem;
    /* 16px — emphasised body, form inputs */
    --vip-text-lg: 1.125rem;
    /* 18px — card titles, H3 */
    --vip-text-xl: 1.375rem;
    /* 22px — H2 */
    --vip-text-2xl: 1.75rem;
    /* 28px — H1 */
    --vip-text-3xl: 2.25rem;
    /* 36px — page display */
    --vip-text-display: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);

    --vip-leading-tight: 1.2;
    --vip-leading-snug: 1.35;
    --vip-leading-normal: 1.5;

    --vip-weight-regular: 400;
    --vip-weight-medium: 500;
    --vip-weight-semibold: 600;
    --vip-weight-bold: 700;
    --vip-weight-black: 800;

    /* ---- Motion --------------------------------------------------------- */
    --vip-ease: cubic-bezier(.2, .7, .2, 1);
    --vip-duration-fast: 120ms;
    --vip-duration-base: 200ms;

    /* ---- Z-index scale --------------------------------------------------- */
    --vip-z-header: 40;
    --vip-z-drawer: 50;
    --vip-z-backdrop: 45;
    --vip-z-mobile-nav: 30;
    --vip-z-skip-link: 100;
}

/*
 * Breakpoint reference (used consistently across component files —
 * CSS has no native media-query variables, kept here as documentation):
 *   xs: 0–389px    (small phones, e.g. 360)
 *   sm: 390–767px  (large phones)
 *   md: 768–1023px (tablets)
 *   lg: 1024–1439px (small desktop)
 *   xl: 1440px+    (large desktop)
 */